<p id="viewportsize">0 × 0</p>
<div id="drawing"></div>
* {
  box-sizing:border-box;
}

body {
  margin:0;
  padding:1.5rem;
  background-color:rgba(6,12,50,1);
}

svg {
  width:100%;
  height:auto;
}

rect {
  transition:all 0.14s ease;
  cursor:pointer;
}

rect:hover {
  fill:rgba(237,0,72,0.65);
}
svg g text {
  display:none;
}

#drawing {
  margin-top:3rem;
}

#viewportsize {
  position:fixed;
  display:inline-block;
  z-index:1000;
  width:auto;
  min-height:20px;
  margin:0 0 1rem;
  padding:0.5em 0.75em 0.6em;
  color:rgba(255,255,255,0.75);
  background:rgba(0,0,0,0.4);
  font-family: monospace;
  border-radius:4px;
}
// The device list. As exhaustive as it seems, this list is not intended to be exhaustive.
var devices = [
  {
    "name":"Acer Iconia Tab A1-810",
    "width":"768",
    "height":"1024"
  },
  {
    "name":"Acer Iconia Tab A100",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Acer Iconia Tab A101",
    "width":"600",
    "height":"1024"
  },
  {
    "name":"Acer Iconia Tab A200",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Acer Iconia Tab A500",
    "width":"648",
    "height":"1280"
  },
  {
    "name":"Acer Iconia Tab A501",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"ACER Liquid E2",
    "width":"360",
    "height":"640"
  },
  {
    "name":"Ainol Novo 7 Elf 2",
    "width":"496",
    "height":"1024"
  },
  {
    "name":"Alcatel One Touch Idol X",
    "width":"480",
    "height":"800"
  },
  {
    "name":"Alcatel One Touch T10",
    "width":"480",
    "height":"800"
  },
  {
    "name":"Alcatel One Touch 903",
    "width":"320",
    "height":"427"
  },
  {
    "name":"Alcatel (Vodafone) Smart Mini 875",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Amicroe 7 TouchTAB II",
    "width":"480",
    "height":"800"
  },
  {
    "name":"Amicroe 9.7 TouchTAB IV",
    "width":"768",
    "height":"1024"
  },
  {
    "name":"Archos 70b (it2)",
    "width":"600",
    "height":"1024"
  },
  {
    "name":"Archos 80G9",
    "width":"768",
    "height":"1024"
  },
  {
    "name":"Arnova 10b G3",
    "width":"600",
    "height":"1024"
  },
  {
    "name":"Arnova 7 G2",
    "width":"480",
    "height":"800"
  },
  {
    "name":"Arnova 7F G3",
    "width":"640",
    "height":"1067"
  },
  {
    "name":"Arnova 8C G3",
    "width":"800",
    "height":"1067"
  },
  {
    "name":"ASUS B1-A71",
    "width":"600",
    "height":"1024"
  },
  {
    "name":"ASUS Fonepad",
    "width":"601",
    "height":"962"
  },
  {
    "name":"ASUS MeMo Pad ME172V",
    "width":"600",
    "height":"1024"
  },
  {
    "name":"ASUS MeMo Pad FHD10/ME302C 10.1",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"ASUS Padfone",
    "width":"800",
    "height":"1128"
  },
  {
    "name":"ASUS Transformer Pad TF300T",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"ASUS Transformer TF101",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"ASUS Vivo",
    "width":"768",
    "height":"1366"
  },
  {
    "name":"Barnes &amp; Noble Nook HD",
    "width":"600",
    "height":"960"
  },
  {
    "name":"BAUHN AMID-972XS",
    "width":"768",
    "height":"1024"
  },
  {
    "name":"BAUHN AMID-9743G",
    "width":"768",
    "height":"1024"
  },
  {
    "name":"BAUHN ASP-5000H",
    "width":"360",
    "height":"640"
  },
  {
    "name":"BlackBerry 9520",
    "width":"345",
    "height":"691"
  },
  {
    "name":"BlackBerry Curve 9380",
    "width":"320",
    "height":"406"
  },
  {
    "name":"BlackBerry PlayBook",
    "width":"600",
    "height":"1024"
  },
  {
    "name":"BlackBerry Torch 9800",
    "width":"360",
    "height":"480"
  },
  {
    "name":"BlackBerry Torch 9860",
    "width":"320",
    "height":"505"
  },
  {
    "name":"BlackBerry Z10",
    "width":"342",
    "height":"570"
  },
  {
    "name":"Dell Venue 8",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Galaxy Nexus",
    "width":"360",
    "height":"598"
  },
  {
    "name":"HP Slate 7 2800",
    "width":"600",
    "height":"1024"
  },
  {
    "name":"HP Slate 21",
    "width":"1920",
    "height":"NA"
  },
  {
    "name":"HP Touchpad",
    "width":"768",
    "height":"1024"
  },
  {
    "name":"HP Touchpad",
    "width":"768",
    "height":"1024"
  },
  {
    "name":"HP Veer",
    "width":"320",
    "height":"545"
  },
  {
    "name":"HTC 7 Mozart",
    "width":"320",
    "height":"480"
  },
  {
    "name":"HTC 7 Trophy",
    "width":"320",
    "height":"480"
  },
  {
    "name":"HTC A620b",
    "width":"320",
    "height":"480"
  },
  {
    "name":"HTC Desire",
    "width":"320",
    "height":"533"
  },
  {
    "name":"HTC Desire C",
    "width":"320",
    "height":"480"
  },
  {
    "name":"HTC Desire HD",
    "width":"320",
    "height":"533"
  },
  {
    "name":"HTC Desire S",
    "width":"320",
    "height":"533"
  },
  {
    "name":"HTC Desire X",
    "width":"320",
    "height":"533"
  },
  {
    "name":"HTC Desire 700",
    "width":"360",
    "height":"640"
  },
  {
    "name":"HTC Desire Z (Vision)",
    "width":"480",
    "height":"800"
  },
  {
    "name":"HTC Droid Eris",
    "width":"320",
    "height":"480"
  },
  {
    "name":"HTC Evo 3D",
    "width":"540",
    "height":"960"
  },
  {
    "name":"HTC Incredible 2",
    "width":"320",
    "height":"533"
  },
  {
    "name":"HTC Legend",
    "width":"320",
    "height":"480"
  },
  {
    "name":"HTC MyTouch Slide 4G",
    "width":"320",
    "height":"533"
  },
  {
    "name":"HTC One",
    "width":"360",
    "height":"640"
  },
  {
    "name":"HTC One Mini",
    "width":"360",
    "height":"640"
  },
  {
    "name":"HTC One S",
    "width":"360",
    "height":"640"
  },
  {
    "name":"HTC One SV",
    "width":"320",
    "height":"533"
  },
  {
    "name":"HTC One V",
    "width":"320",
    "height":"533"
  },
  {
    "name":"HTC One X",
    "width":"360",
    "height":"640"
  },
  {
    "name":"HTC One X+",
    "width":"360",
    "height":"640"
  },
  {
    "name":"HTC One XL",
    "width":"360",
    "height":"640"
  },
  {
    "name":"HTC Rio 8S",
    "width":"320",
    "height":"480"
  },
  {
    "name":"HTC Sensation XL",
    "width":"360",
    "height":"640"
  },
  {
    "name":"HTC Titan II/4G",
    "width":"320",
    "height":"480"
  },
  {
    "name":"HTC Velocity 4G",
    "width":"360",
    "height":"640"
  },
  {
    "name":"HTC Wildfire A3333",
    "width":"267",
    "height":"356"
  },
  {
    "name":"HTC Wildfire S",
    "width":"320",
    "height":"480"
  },
  {
    "name":"HTC Windows Phone 8S",
    "width":"320",
    "height":"480"
  },
  {
    "name":"HTC Windows Phone 8X (C625b)",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Huawei Ascend G510",
    "width":"320",
    "height":"569"
  },
  {
    "name":"Huawei Ascend Mate",
    "width":"480",
    "height":"813"
  },
  {
    "name":"Huawei U8650 Sonic",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Huawei U8860",
    "width":"320",
    "height":"544"
  },
  {
    "name":"Huawei Y300-0151",
    "width":"320",
    "height":"533"
  },
  {
    "name":"iPad",
    "width":"768",
    "height":"1024"
  },
  {
    "name":"iPad 2",
    "width":"768",
    "height":"1024"
  },
  {
    "name":"iPad 3",
    "width":"768",
    "height":"1024"
  },
  {
    "name":"iPad Air",
    "width":"768",
    "height":"1024"
  },
  {
    "name":"iPad Mini",
    "width":"768",
    "height":"1024"
  },
  {
    "name":"iPhone",
    "width":"320",
    "height":"480"
  },
  {
    "name":"iPhone 3G",
    "width":"320",
    "height":"480"
  },
  {
    "name":"iPhone 3GS",
    "width":"320",
    "height":"480"
  },
  {
    "name":"iPhone 4",
    "width":"320",
    "height":"480"
  },
  {
    "name":"iPhone 4S",
    "width":"320",
    "height":"480"
  },
  {
    "name":"iPhone 5",
    "width":"320",
    "height":"568"
  },
  {
    "name":"iPhone 5c",
    "width":"320",
    "height":"568"
  },
  {
    "name":"iPhone 5s",
    "width":"320",
    "height":"568"
  },
  {
    "name":"iPhone 6",
    "width":"375",
    "height":"667"
  },
  {
    "name":"iPhone 6 Plus",
    "width":"414",
    "height":"736"
  },
  {
    "name":"iPod Touch 4th Gen",
    "width":"320",
    "height":"480"
  },
  {
    "name":"iPod Touch 5th Gen",
    "width":"320",
    "height":"568"
  },
  {
    "name":"Kindle Fire 2",
    "width":"600",
    "height":"963"
  },
  {
    "name":"Kindle Fire HD",
    "width":"533",
    "height":"801"
  },
  {
    "name":"Kindle Fire HD 8.9",
    "width":"800",
    "height":"1220"
  },
  {
    "name":"Lenovo IdeaTab A1000",
    "width":"600",
    "height":"1024"
  },
  {
    "name":"Lenovo IdeaTab S6000",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Lenovo Yoga Tablet 8",
    "width":"602",
    "height":"962"
  },
  {
    "name":"Lenovo Yoga Tablet 10",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"LG Ally",
    "width":"320",
    "height":"533"
  },
  {
    "name":"LG G2",
    "width":"360",
    "height":"598"
  },
  {
    "name":"LG Optimus 2x",
    "width":"320",
    "height":"533"
  },
  {
    "name":"LG Optimus Black P970",
    "width":"320",
    "height":"533"
  },
  {
    "name":"LG Optimus G E975",
    "width":"384",
    "height":"640"
  },
  {
    "name":"LG Optimus L3 E400",
    "width":"320",
    "height":"427"
  },
  {
    "name":"LG Optimus L3 II E425f",
    "width":"320",
    "height":"427"
  },
  {
    "name":"LG Optimus L7 P700",
    "width":"320",
    "height":"533"
  },
  {
    "name":"LG Optimus L9 P760",
    "width":"360",
    "height":"640"
  },
  {
    "name":"LG Optimus Pad V900",
    "width":"768",
    "height":"1280"
  },
  {
    "name":"LG Viewty KU990",
    "width":"240",
    "height":"400"
  },
  {
    "name":"Microsoft Surface",
    "width":"768",
    "height":"1366"
  },
  {
    "name":"Microsoft Surface Pro",
    "width":"720",
    "height":"1280"
  },
  {
    "name":"Motorola Defy",
    "width":"320",
    "height":"569"
  },
  {
    "name":"Motorola Defy Mini",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Motorola Droid Bionic",
    "width":"360",
    "height":"640"
  },
  {
    "name":"Motorola Droid Razr",
    "width":"360",
    "height":"640"
  },
  {
    "name":"Motorola Droid 3",
    "width":"360",
    "height":"559"
  },
  {
    "name":"Motorola Electrify 2",
    "width":"360",
    "height":"598"
  },
  {
    "name":"Motorola Fire XT",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Motorola FlipOut",
    "width":"320",
    "height":"240"
  },
  {
    "name":"Motorola Milestone",
    "width":"320",
    "height":"569"
  },
  {
    "name":"Motorola Moto G",
    "width":"360",
    "height":"598"
  },
  {
    "name":"Motorola RAZR HD 4G",
    "width":"360",
    "height":"598"
  },
  {
    "name":"Motorola RAZR M 4G",
    "width":"360",
    "height":"598"
  },
  {
    "name":"Motorola RAZR MAXX",
    "width":"360",
    "height":"640"
  },
  {
    "name":"Motorola Xoom",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Motorola Xoom 2",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Motorola Xoom 2 Media Edition",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Nexus 10",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Nexus 4",
    "width":"384",
    "height":"598"
  },
  {
    "name":"Nexus 5",
    "width":"360",
    "height":"598"
  },
  {
    "name":"Nexus 7",
    "width":"603",
    "height":"966"
  },
  {
    "name":"Nexus 7",
    "width":"600",
    "height":"961"
  },
  {
    "name":"Nexus 7",
    "width":"601",
    "height":"962"
  },
  {
    "name":"Nexus 7 (LCD Density set to 175PPI)",
    "width":"731",
    "height":"1170"
  },
  {
    "name":"Nexus 7 (2013)",
    "width":"600",
    "height":"960"
  },
  {
    "name":"Nexus One",
    "width":"320",
    "height":"533"
  },
  {
    "name":"Nexus S",
    "width":"320",
    "height":"533"
  },
  {
    "name":"Nokia Lumia 520",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Nokia Lumia 610",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Nokia Lumia 710",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Nokia Lumia 720",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Nokia Lumia 800",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Nokia Lumia 820",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Nokia Lumia 900",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Nokia Lumia 920",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Nokia Lumia 925",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Nokia Lumia 1520",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Nokia N9",
    "width":"320",
    "height":"496"
  },
  {
    "name":"Nokia N900",
    "width":"480",
    "height":"800"
  },
  {
    "name":"Palm Pixi",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Panasonic Toughpad FZ-A1",
    "width":"768",
    "height":"1024"
  },
  {
    "name":"PendoPad 7&quot;",
    "width":"480",
    "height":"800"
  },
  {
    "name":"PendoPad 10&quot;",
    "width":"600",
    "height":"1024"
  },
  {
    "name":"Pioneer Dreambook",
    "width":"768",
    "height":"1024"
  },
  {
    "name":"Samsung Ativ S",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Samsung Galaxy 5/Europa I5500",
    "width":"320",
    "height":"427"
  },
  {
    "name":"Samsung Galaxy Ace S5830",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Samsung Galaxy Ace 2 I8160",
    "width":"320",
    "height":"533"
  },
  {
    "name":"Samsung Galaxy Ace Plus S7500",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Samsung Galaxy Beam I8530",
    "width":"320",
    "height":"533"
  },
  {
    "name":"Samsung Galaxy Camera GC100",
    "width":"360",
    "height":"598"
  },
  {
    "name":"Samsung Galaxy Mini S5570",
    "width":"240",
    "height":"320"
  },
  {
    "name":"Samsung Galaxy Mini 2 S6500",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Samsung Galaxy Note N700",
    "width":"400",
    "height":"640"
  },
  {
    "name":"Samsung Galaxy Note 10.1 N8010",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Samsung Galaxy Note 10.1 N8010 (Multiscreen Enabled)",
    "width":"800",
    "height":"637"
  },
  {
    "name":"Samsung Galaxy Note 10.1 (2014 Edition) P600",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Samsung Galaxy Note 2 N7100",
    "width":"360",
    "height":"640"
  },
  {
    "name":"Samsung Galaxy Note 3 N9005",
    "width":"360",
    "height":"640"
  },
  {
    "name":"Samsung Galaxy Note 8.0 N5100",
    "width":"601",
    "height":"962"
  },
  {
    "name":"Samsung Galaxy Note 8.0 N5110",
    "width":"601",
    "height":"962"
  },
  {
    "name":"Samsung Galaxy S I9000",
    "width":"320",
    "height":"533"
  },
  {
    "name":"Samsung Galaxy S Duos S7562",
    "width":"320",
    "height":"533"
  },
  {
    "name":"Samsung Galaxy S WiFi YPG70CW",
    "width":"320",
    "height":"533"
  },
  {
    "name":"Samsung Galaxy S2 I9100",
    "width":"320",
    "height":"533"
  },
  {
    "name":"Samsung Galaxy S3 I9300",
    "width":"360",
    "height":"640"
  },
  {
    "name":"Samsung Galaxy S3 Mini I8190",
    "width":"320",
    "height":"533"
  },
  {
    "name":"Samsung Galaxy S4 I9500",
    "width":"360",
    "height":"640"
  },
  {
    "name":"Samsung Galaxy S4 I9505",
    "width":"360",
    "height":"640"
  },
  {
    "name":"Samsung Galaxy S4 Active I9295",
    "width":"360",
    "height":"640"
  },
  {
    "name":"Samsung Galaxy S4 Mini I9190",
    "width":"360",
    "height":"640"
  },
  {
    "name":"Samsung Galaxy S4 Zoom SM-C105",
    "width":"360",
    "height":"640"
  },
  {
    "name":"Samsung Galaxy Tab 10.1 P7510",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Samsung Galaxy Tab 2 10.1 P5110",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Samsung Galaxy Tab 2 7.0 P3110",
    "width":"600",
    "height":"1024"
  },
  {
    "name":"Samsung Galaxy Tab 3 7.0 T210",
    "width":"600",
    "height":"1024"
  },
  {
    "name":"Samsung Galaxy Tab 3 8.0 T310",
    "width":"602",
    "height":"962"
  },
  {
    "name":"Samsung Galaxy Tab 3 10.1 P5210",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Samsung Galaxy Tab 3 Kids T2105",
    "width":"600",
    "height":"1024"
  },
  {
    "name":"Samsung Galaxy Tab 7.7 P6810",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Samsung Galaxy Tab 7.0 Plus P6210",
    "width":"600",
    "height":"1024"
  },
  {
    "name":"Samsung Galaxy Tab 8.9 P7310",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Samsung Galaxy Tab 8.9 4G P7320",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Samsung Galaxy Tab P1000",
    "width":"400",
    "height":"683"
  },
  {
    "name":"Samsung Galaxy X Cover 2 S7710 ",
    "width":"320",
    "height":"533"
  },
  {
    "name":"Samsung Galaxy Y S5360",
    "width":"320",
    "height":"427"
  },
  {
    "name":"Samsung Galaxy Young S6310",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Samsung Infuse 4G I997",
    "width":"320",
    "height":"533"
  },
  {
    "name":"Samsung Omnia W I8350",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Samsung Omnia 7 I8700",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Samsung Wave S8500",
    "width":"240",
    "height":"400"
  },
  {
    "name":"Samsung Wave S8500",
    "width":"320",
    "height":"534"
  },
  {
    "name":"Scroll Excel",
    "width":"480",
    "height":"800"
  },
  {
    "name":"Sony Ericsson Xperia Arc",
    "width":"320",
    "height":"569"
  },
  {
    "name":"Sony Ericsson Xperia Mini ST15i",
    "width":"320",
    "height":"401"
  },
  {
    "name":"Sony Ericsson Xperia Neo",
    "width":"480",
    "height":"854"
  },
  {
    "name":"Sony Ericcson Xperia Play",
    "width":"425",
    "height":"974"
  },
  {
    "name":"Sony Ericsson Xperia X8",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Sony Ericsson Xperia X10",
    "width":"320",
    "height":"569"
  },
  {
    "name":"Sony Tablet S",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Sony VAIO Tap 20",
    "width":"900",
    "height":"1600"
  },
  {
    "name":"Sony Xperia acro S",
    "width":"360",
    "height":"640"
  },
  {
    "name":"Sony Xperia P",
    "width":"360",
    "height":"640"
  },
  {
    "name":"Sony Xperia S",
    "width":"360",
    "height":"640"
  },
  {
    "name":"Sony Xperia Sola",
    "width":"320",
    "height":"569"
  },
  {
    "name":"Sony Xperia SP",
    "width":"360",
    "height":"598"
  },
  {
    "name":"Sony Xperia Tablet Z",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Sony Xperia Tipo",
    "width":"320",
    "height":"480"
  },
  {
    "name":"Sony Xperia U",
    "width":"320",
    "height":"569"
  },
  {
    "name":"Sony Xperia V",
    "width":"360",
    "height":"598"
  },
  {
    "name":"Sony Xperia Z",
    "width":"360",
    "height":"598"
  },
  {
    "name":"Sony Xperia Z1",
    "width":"360",
    "height":"598"
  },
  {
    "name":"Telstra T-Hub 2",
    "width":"400",
    "height":"683"
  },
  {
    "name":"Tesco Hudl",
    "width":"600",
    "height":"799"
  },
  {
    "name":"Toshiba AT100",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Toshiba AT1S0",
    "width":"602",
    "height":"961"
  },
  {
    "name":"Toshiba AT200",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Toshiba AT300",
    "width":"800",
    "height":"1280"
  },
  {
    "name":"Toshiba AT330",
    "width":"900",
    "height":"1600"
  },
  {
    "name":"Wiko Cink Slim",
    "width":"320",
    "height":"533"
  },
  {
    "name":"Yarvik Xenta Tab 8c",
    "width":"768",
    "height":"1024"
  },
  {
    "name":"Xiaomi MI-3",
    "width":"360",
    "height":"640"
  },
  {
    "name":"ZTE Open",
    "width":"320",
    "height":"415"
  },
  {
    "name":"ZTE T22 (Telstra Urbane)",
    "width":"320",
    "height":"533"
  },
  {
    "name":"ZTE T28 (Telstra Active Touch)",
    "width":"320",
    "height":"533"
  },
  {
    "name":"ZTE T760 (Telstra Smart-Touch 2)",
    "width":"320",
    "height":"480"
  },
  {
    "name":"ZTE T790 (Telstra Pulse)",
    "width":"320",
    "height":"480"
  },
  {
    "name":"ZTE T81 (Telstra Frontier 4G)",
    "width":"320",
    "height":"533"
  },
  {
    "name":"ZTE T82 (Telstra Easy Touch 4G)",
    "width":"360",
    "height":"598"
  },
  {
    "name":"ZTE T83 (Telstra Dave 4G)",
    "width":"320",
    "height":"534"
  },
  {
   "name": "Apple iPhone X",
   "phys. width": 1125,
   "phys. height": 2436,
   "width": 375,
   "height": 812,
   "pixel ratio": 3,
   "phys. ppi": 458,
   "ppi": 288
 },
 {
   "name": "Apple iPhone 6+, 6s+, 7+, 8+",
   "phys. width": 1080,
   "phys. height": 1920,
   "width": 414,
   "height": 736,
   "pixel ratio": 3,
   "phys. ppi": 401,
   "ppi": 288
 },
 {
   "name": "Apple iPhone 7, iPhone 8",
   "phys. width": 750,
   "phys. height": 1334,
   "width": 375,
   "height": 667,
   "pixel ratio": 2,
   "phys. ppi": 326,
   "ppi": 192
 },
 {
   "name": "Apple iPhone 6, 6s",
   "phys. width": 750,
   "phys. height": 1334,
   "width": 375,
   "height": 667,
   "pixel ratio": 2,
   "phys. ppi": 326,
   "ppi": 192
 },
 {
   "name": "Apple iPhone 5",
   "phys. width": 640,
   "phys. height": 1136,
   "width": 320,
   "height": 568,
   "pixel ratio": 2,
   "phys. ppi": 326,
   "ppi": 192
 },
 {
   "name": "Apple iPhone 4",
   "phys. width": 640,
   "phys. height": 960,
   "width": 320,
   "height": 480,
   "pixel ratio": 2,
   "phys. ppi": 326,
   "ppi": 192
 },
 {
   "name": "Apple iPhone 3",
   "phys. width": 320,
   "phys. height": 480,
   "width": 320,
   "height": 480,
   "pixel ratio": 1,
   "phys. ppi": 163,
   "ppi": 96
 },
 {
   "name": "Apple iPod Touch",
   "phys. width": 640,
   "phys. height": 1136,
   "width": 320,
   "height": 568,
   "pixel ratio": 2,
   "phys. ppi": 326,
   "ppi": 192
 },
 {
   "name": "LG G5",
   "phys. width": 1440,
   "phys. height": 2560,
   "width": 360,
   "height": 640,
   "pixel ratio": 4,
   "phys. ppi": 538,
   "ppi": 384
 },
 {
   "name": "LG G4",
   "phys. width": 1440,
   "phys. height": 2560,
   "width": 360,
   "height": 640,
   "pixel ratio": 4,
   "phys. ppi": 538,
   "ppi": 384
 },
 {
   "name": "LG G3",
   "phys. width": 1440,
   "phys. height": 2560,
   "width": 360,
   "height": 640,
   "pixel ratio": 4,
   "phys. ppi": 538,
   "ppi": 384
 },
 {
   "name": "LG Optimus G",
   "phys. width": 768,
   "phys. height": 1280,
   "width": 384,
   "height": 640,
   "pixel ratio": 2,
   "phys. ppi": 318,
   "ppi": 192
 },
 {
   "name": "Samsung Galaxy S8+",
   "phys. width": 1440,
   "phys. height": 2960,
   "width": 360,
   "height": 740,
   "pixel ratio": 4,
   "phys. ppi": 529,
   "ppi": 384
 },
 {
   "name": "Samsung Galaxy S8",
   "phys. width": 1440,
   "phys. height": 2960,
   "width": 360,
   "height": 740,
   "pixel ratio": 4,
   "phys. ppi": 568,
   "ppi": 384
 },
 {
   "name": "Samsung Galaxy S7, S7 edge",
   "phys. width": 1440,
   "phys. height": 2560,
   "width": 360,
   "height": 640,
   "pixel ratio": 4,
   "phys. ppi": 534,
   "ppi": 384
 },
 {
   "name": "Samsung Galaxy S6",
   "phys. width": 1440,
   "phys. height": 2560,
   "width": 360,
   "height": 640,
   "pixel ratio": 4,
   "phys. ppi": 577,
   "ppi": 384
 },
 {
   "name": "Samsung Galaxy S5",
   "phys. width": 1080,
   "phys. height": 1920,
   "width": 360,
   "height": 640,
   "pixel ratio": 3,
   "phys. ppi": 441,
   "ppi": 288
 },
 {
   "name": "Samsung Galaxy S4",
   "phys. width": 1080,
   "phys. height": 1920,
   "width": 360,
   "height": 640,
   "pixel ratio": 3,
   "phys. ppi": 441,
   "ppi": 288
 },
 {
   "name": "Samsung Galaxy S4 mini",
   "phys. width": 540,
   "phys. height": 960,
   "width": 360,
   "height": 640,
   "pixel ratio": 1.5,
   "phys. ppi": 256,
   "ppi": 144
 },
 {
   "name": "Samsung Galaxy S3",
   "phys. width": 720,
   "phys. height": 1280,
   "width": 360,
   "height": 640,
   "pixel ratio": 2,
   "phys. ppi": 306,
   "ppi": 192
 },
 {
   "name": "Samsung Galaxy S3 mini",
   "phys. width": 480,
   "phys. height": 800,
   "width": 320,
   "height": 533,
   "pixel ratio": 1.5,
   "phys. ppi": 233,
   "ppi": 144
 },
 {
   "name": "Samsung Galaxy S2",
   "phys. width": 480,
   "phys. height": 800,
   "width": 320,
   "height": 533,
   "pixel ratio": 1.5,
   "phys. ppi": 217,
   "ppi": 144
 },
 {
   "name": "Samsung Galaxy S",
   "phys. width": 480,
   "phys. height": 800,
   "width": 320,
   "height": 533,
   "pixel ratio": 1.5,
   "phys. ppi": 233,
   "ppi": 144
 },
 {
   "name": "Samsung Galaxy Nexus",
   "phys. width": 720,
   "phys. height": 1200,
   "width": 360,
   "height": 600,
   "pixel ratio": 2,
   "phys. ppi": 316,
   "ppi": 192
 },
 {
   "name": "Samsung Galaxy Note 8",
   "phys. width": 1440,
   "phys. height": 2960,
   "width": 360,
   "height": 740,
   "pixel ratio": 4,
   "phys. ppi": 521,
   "ppi": 384
 },
 {
   "name": "Samsung Galaxy Note 4",
   "phys. width": 1440,
   "phys. height": 2560,
   "width": 360,
   "height": 640,
   "pixel ratio": 4,
   "phys. ppi": 515,
   "ppi": 384
 },
 {
   "name": "Samsung Galaxy Note 3",
   "phys. width": 1080,
   "phys. height": 1920,
   "width": 360,
   "height": 640,
   "pixel ratio": 3,
   "phys. ppi": 386,
   "ppi": 288
 },
 {
   "name": "Samsung Galaxy Note 2",
   "phys. width": 720,
   "phys. height": 1280,
   "width": 360,
   "height": 640,
   "pixel ratio": 2,
   "phys. ppi": 267,
   "ppi": 192
 },
 {
   "name": "Samsung Galaxy Note",
   "phys. width": 800,
   "phys. height": 1280,
   "width": 400,
   "height": 640,
   "pixel ratio": 2,
   "phys. ppi": 285,
   "ppi": 192
 },
 {
   "name": "LG Nexus 5",
   "phys. width": 1080,
   "phys. height": 1920,
   "width": 360,
   "height": 640,
   "pixel ratio": 3,
   "phys. ppi": 445,
   "ppi": 288
 },
 {
   "name": "LG Nexus 4",
   "phys. width": 768,
   "phys. height": 1280,
   "width": 384,
   "height": 640,
   "pixel ratio": 2,
   "phys. ppi": 320,
   "ppi": 192
 },
 {
   "name": "Microsoft Lumia 1520",
   "phys. width": 1080,
   "phys. height": 1920,
   "width": 432,
   "height": 768,
   "pixel ratio": 2.5,
   "phys. ppi": 367,
   "ppi": 240
 },
 {
   "name": "Microsoft Lumia 1020",
   "phys. width": 768,
   "phys. height": 1280,
   "width": 320,
   "height": 480,
   "pixel ratio": 2.4,
   "phys. ppi": 332,
   "ppi": 220
 },
 {
   "name": "Microsoft Lumia 925",
   "phys. width": 768,
   "phys. height": 1280,
   "width": 320,
   "height": 480,
   "pixel ratio": 2.4,
   "phys. ppi": 332,
   "ppi": 220
 },
 {
   "name": "Microsoft Lumia 920",
   "phys. width": 768,
   "phys. height": 1280,
   "width": 320,
   "height": 480,
   "pixel ratio": 2.4,
   "phys. ppi": 332,
   "ppi": 220
 },
 {
   "name": "Microsoft Lumia 900",
   "phys. width": 480,
   "phys. height": 800,
   "width": 320,
   "height": 480,
   "pixel ratio": 1.5,
   "phys. ppi": 217,
   "ppi": 144
 },
 {
   "name": "Microsoft Lumia 830",
   "phys. width": 720,
   "phys. height": 1280,
   "width": 320,
   "height": 480,
   "pixel ratio": 2,
   "phys. ppi": 294,
   "ppi": 192
 },
 {
   "name": "Microsoft Lumia 620",
   "phys. width": 480,
   "phys. height": 800,
   "width": 320,
   "height": 480,
   "pixel ratio": 1.5,
   "phys. ppi": 252,
   "ppi": 144
 },
 {
   "name": "Motorola Nexus 6",
   "phys. width": 1440,
   "phys. height": 2560,
   "width": 412,
   "height": 690,
   "pixel ratio": 3.5,
   "phys. ppi": 493,
   "ppi": 336
 },
 {
   "name": "HTC One",
   "phys. width": 1080,
   "phys. height": 1920,
   "width": 360,
   "height": 640,
   "pixel ratio": 3,
   "phys. ppi": 468,
   "ppi": 288
 },
 {
   "name": "HTC 8X",
   "phys. width": 720,
   "phys. height": 1280,
   "width": 320,
   "height": 480,
   "pixel ratio": 3,
   "phys. ppi": 341,
   "ppi": 288
 },
 {
   "name": "HTC Evo 3D",
   "phys. width": 540,
   "phys. height": 960,
   "width": 360,
   "height": 640,
   "pixel ratio": 1.5,
   "phys. ppi": 256,
   "ppi": 144
 },
 {
   "name": "Sony Xperia Z3",
   "phys. width": 1080,
   "phys. height": 1920,
   "width": 360,
   "height": 598,
   "pixel ratio": 3,
   "phys. ppi": 424,
   "ppi": 288
 },
 {
   "name": "Sony Xperia Z",
   "phys. width": 1080,
   "phys. height": 1920,
   "width": 360,
   "height": 640,
   "pixel ratio": 3,
   "phys. ppi": 443,
   "ppi": 288
 },
 {
   "name": "Sony Xperia S",
   "phys. width": 720,
   "phys. height": 1280,
   "width": 360,
   "height": 640,
   "pixel ratio": 2,
   "phys. ppi": 342,
   "ppi": 192
 },
 {
   "name": "Sony Xperia P",
   "phys. width": 540,
   "phys. height": 960,
   "width": 360,
   "height": 640,
   "pixel ratio": 1.5,
   "phys. ppi": 275,
   "ppi": 144
 },
 {
   "name": "Xiaomi Mi 4",
   "phys. width": 1080,
   "phys. height": 1920,
   "width": 360,
   "height": 640,
   "pixel ratio": 3,
   "phys. ppi": 441,
   "ppi": 288
 },
 {
   "name": "Xiaomi Mi 3",
   "phys. width": 1080,
   "phys. height": 1920,
   "width": 360,
   "height": 640,
   "pixel ratio": 3,
   "phys. ppi": 441,
   "ppi": 288
 },
 {
   "name": "Lenovo K900",
   "phys. width": 1080,
   "phys. height": 1920,
   "width": 360,
   "height": 640,
   "pixel ratio": 3,
   "phys. ppi": 401,
   "ppi": 288
 },
 {
   "name": "Pantech Vega n°6",
   "phys. width": 1080,
   "phys. height": 1920,
   "width": 360,
   "height": 640,
   "pixel ratio": 3,
   "phys. ppi": 373,
   "ppi": 288
 },
 {
   "name": "Blackberry Leap",
   "phys. width": 720,
   "phys. height": 1280,
   "width": 390,
   "height": 695,
   "pixel ratio": 2,
   "phys. ppi": 294,
   "ppi": 177
 },
 {
   "name": "Blackberry Passport",
   "phys. width": 1440,
   "phys. height": 1440,
   "width": 504,
   "height": 504,
   "pixel ratio": 3,
   "phys. ppi": 453,
   "ppi": 274
 },
 {
   "name": "Blackberry Classic",
   "phys. width": 720,
   "phys. height": 720,
   "width": 390,
   "height": 390,
   "pixel ratio": 1.8,
   "phys. ppi": 294,
   "ppi": 177
 },
 {
   "name": "Blackberry Q10",
   "phys. width": 720,
   "phys. height": 720,
   "width": 346,
   "height": 346,
   "pixel ratio": 2,
   "phys. ppi": 328,
   "ppi": 192
 },
 {
   "name": "Blackberry Z30",
   "phys. width": 720,
   "phys. height": 1280,
   "width": 360,
   "height": 640,
   "pixel ratio": 2,
   "phys. ppi": 295,
   "ppi": 192
 },
 {
   "name": "Blackberry Z10",
   "phys. width": 768,
   "phys. height": 1280,
   "width": 384,
   "height": 640,
   "pixel ratio": 2,
   "phys. ppi": 355,
   "ppi": 192
 },
 {
   "name": "Blackberry Torch 9800",
   "phys. width": 360,
   "phys. height": 480,
   "width": 360,
   "height": 480,
   "pixel ratio": 1,
   "phys. ppi": 187,
   "ppi": 96
 },
 {
   "name": "ZTE Grand S",
   "phys. width": 1080,
   "phys. height": 1920,
   "width": 360,
   "height": 640,
   "pixel ratio": 3,
   "phys. ppi": 441,
   "ppi": 288
 },
 {
   "name": "ZTE Open (Firefox OS)",
   "phys. width": 480,
   "phys. height": 720,
   "width": 320,
   "height": 480,
   "pixel ratio": 1.5,
   "phys. ppi": 165,
   "ppi": 144
 },
 {
   "name":"SVGA",
   "width":800,
   "height":600
 },
  {
   "name":"WSVGA",
   "width":1024,
   "height":600
 },
  {
   "name":"XGA",
   "width":"1024",
   "height":"768"
 },
  {
   "name":"XGA+",
   "width":"1152",
   "height":"864"
 },
  {
   "name":"WXGA",
   "width":"1280",
   "height":"720"
 },
  {
   "name":"WXGA",
   "width":"1280",
   "height":"768"
 },
  {
   "name":"WXGA",
   "width":"1280",
   "height":"800"
 },
  {
   "name":"SXGA",
   "width":"1280",
   "height":"1024"
 },
  {
   "name":"HD",
   "width":"1360",
   "height":"768"
 },
  {
   "name":"HD",
   "width":"1366",
   "height":"768"
 },
  {
   "name":"WXGA+",
   "width":"1440",
   "height":"900"
 },
  {
   "name":"other",
   "width":"1536",
   "height":"864"
 },
  {
   "name":"HD+",
   "width":"1600",
   "height":"900"
 },
  {
   "name":"WXGA+",
   "width":"1440",
   "height":"900"
 },
  {
   "name":"WSXGA+",
   "width":"1680",
   "height":"1050"
 },
  {
   "name":"FullHD",
   "width":"1920",
   "height":"1080"
 },
  {
   "name":"WUXGA",
   "width":"1920",
   "height":"1200"
 },
  {
   "name":"other",
   "width":"2560",
   "height":"1080"
 },
  {
   "name":"WQHD",
   "width":"2560",
   "height":"1440"
 },
  {
   "name":"other",
   "width":"3440",
   "height":"1440"
 },
  {
   "name":"4K UHD",
   "width":"3840",
   "height":"2160"
 },
 {
   "name":"Qualcomm Toq",
   "width":"288",
   "height":"192"
 },
 {
   "name":"Exetech XS3",
   "width":"240",
   "height":"240"
 },
 {
   "name":"U Watch U8",
   "width":"128",
   "height":"128"
 },
 {
   "name":"Pebble Watch",
   "width":"144",
   "height":"168"
 },
 {
   "name":"Apple Watch",
   "width":"272",
   "height":"340"
 },
 {
   "name":"Apple Watch",
   "width":"312",
   "height":"390"
 },
 {
   "name":"Sony SmartWatch",
   "width":"220",
   "height":"176"
 },
 {
   "name":"Motorola Moto 360",
   "width":"320",
   "height":"290"
 },
 {
   "name":"LG G Watch",
   "width":"280",
   "height":"280"
 },
 {
   "name":"LG G Watch R",
   "width":"320",
   "height":"320"
 },
 {
   "name":"Samsung Gear S",
   "width":"360",
   "height":"480"
 },
 {
   "name":"Samsung Gear Fit",
   "width":"128",
   "height":"432"
 }
];

// Sort by viewport width
devices.sort( function(a,b){ return b.width - a.width } );

// Create SVG with svg.js
var draw = SVG('drawing');
draw.viewbox(0,0,3842,2162); 

// Draw a rect for every device
for (const device of devices) {
  console.log(device["width"]);
  //var d = document.createTextNode(device[name]);
  var rect = draw.rect(parseInt(device["width"]), parseInt(device["height"])).attr({ 'stroke': 'rgba(237,0,72,1)', 'stroke-width': '3', 'fill': 'rgba(237,0,72,0.005)' });
  
  var group = draw.group();
  group.add(rect);
}

$('svg rect').hover(function(event){
  var labeltext = $(this).attr('width') + " × " + $(this).attr('height');
  $('#viewportsize').html(labeltext);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js