代码拉取完成，页面将自动刷新
<!-- saved from url=(0077)https://www.screensizes.app/?source=iphone&type=models&id=015&model=i12promax -->
<html lang="en" class="hb-loaded">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Google Tag Manager -->
<script type="text/javascript" async="" src="./ScreenSizes_files/analytics.js"></script>
<script async="" src="./ScreenSizes_files/gtm.js"></script>
<title>Screen Sizes</title>
<meta name="description" content="A complete guide for Apple displays">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#FFFFFF">
<meta name="keywords"
content="apple, iphone, ipad, apple watch, apple tv, carplay, ipod touch, itouch, iwatch, display, screen, size, screen size, display size, true tone, widgets, ios, ipados, tvos, watchos, multitasking, safe areas, development, design">
<link rel="stylesheet" href="./ScreenSizes_files/styles.css">
<link rel="apple-touch-icon" href="https://www.screensizes.app/apple-touch-icon.png?m=20210505">
<link rel="icon" href="https://www.screensizes.app/favicon.ico">
<link rel="icon" href="https://www.screensizes.app/favicon.svg" type="image/svg+xml">
<link rel="manifest" href="./manifest.json">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://screensizes.app">
<meta property="og:title" content="Screen Sizes">
<meta property="og:description" content="A complete guide for Apple displays">
<meta property="og:image" content="https://screensizes.app/ogimage.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://screensizes.app">
<meta property="twitter:title" content="Screen Sizes">
<meta property="twitter:description" content="A complete guide for Apple displays">
<meta property="twitter:image" content="https://screensizes.app/ogimage.png">
<!--
<!– Launch Images –>
<link href="https://www.screensizes.app/images/launch/iphone_5.png?m=20201121"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_5_landscape.png?m=20201121"
media="(device-width: 568px) and (device-height: 320px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_6.png?m=20201121"
media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_6_landscape.png?m=20201121"
media="(device-width: 667px) and (device-height: 375px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_6_plus.png?m=20201121"
media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_6_plus_landscape.png?m=20201121"
media="(device-width: 736px) and (device-height: 414px) and (-webkit-device-pixel-ratio: 3) and (orientation:landscape)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_x.png?m=20201121"
media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_x_landscape.png?m=20201121"
media="(device-width: 812px) and (device-height: 375px) and (-webkit-device-pixel-ratio: 3) and (orientation:landscape)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_xr.png?m=20201121"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_xr_landscape.png?m=20201121"
media="(device-width: 896px) and (device-height: 414px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_xs_max.png?m=20201121"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_xs_max_landscape.png?m=20201121"
media="(device-width: 896px) and (device-height: 414px) and (-webkit-device-pixel-ratio: 3) and (orientation:landscape)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_12_mini?m=20201121"
media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_12_mini_landscape.png?m=20201121"
media="(device-width: 812px) and (device-height: 375px) and (-webkit-device-pixel-ratio: 3) and (orientation:landscape)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_12.png?m=20201121"
media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_12_landscape.png?m=20201121"
media="(device-width: 844px) and (device-height: 390px) and (-webkit-device-pixel-ratio: 3) and (orientation:landscape)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_12_pro_max.png?m=20201121"
media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/iphone_12_pro_max_landscape.png?m=20201121"
media="(device-width: 926px) and (device-height: 428px) and (-webkit-device-pixel-ratio: 3) and (orientation:landscape)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/ipad_7-9.png?m=20201121"
media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/ipad_7-9_landscape.png?m=20201121"
media="(device-width: 1024px) and (device-height: 768px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/ipad_pro_10-5.png?m=20201121"
media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/ipad_pro_10-5_landscape.png?m=20201121"
media="(device-width: 1112px) and (device-height: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/ipad_pro_11.png?m=20201121"
media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/ipad_pro_11_landscape.png?m=20201121"
media="(device-width: 1194px) and (device-height: 843px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/ipad_pro_12.png?m=20201121"
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<link href="https://www.screensizes.app/images/launch/ipad_pro_12_landscape.png?m=20201121"
media="(device-width: 1366px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)"
rel="apple-touch-startup-image">-->
<style type="text/css">
@font-face {
font-family: "element-icons";
src: url('chrome-extension://moombeodfomdpjnpocobemoiaemednkg/fonts/element-icons.woff') format('woff'),
url('chrome-extension://moombeodfomdpjnpocobemoiaemednkg/fonts/element-icons.ttf ') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
}
</style>
</head>
<body ontouchstart="" huaban_collector_injected="true">
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NWMBN6R"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- SHORTCUTS PANEL -->
<div id="containerShortcuts" class="hidden">
<div id="panelShortcuts">
<ul>
<li>
<span>iPhone</span>
<span>1</span>
</li>
<li>
<span>iPad</span>
<span>2</span>
</li>
<li>
<span>iPod touch</span>
<span>3</span>
</li>
<li>
<span>Apple Watch</span>
<span>4</span>
</li>
<li>
<span>Apple TV</span>
<span>5</span>
</li>
<li>
<span>CarPlay</span>
<span>6</span>
</li>
<li>
<span>Info</span>
<span>I</span>
</li>
</ul>
</div>
</div>
<!-- PRIMARY COLUMN -->
<aside>
<button id="buttonInfo" data-source="info">
<svg viewBox="0 0 24 25" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.899999976">
<path d="M11.9492188,24.4921875 C18.4882812,24.4921875 23.9023438,19.0664062 23.9023438,12.5390625 C23.9023438,6 18.4765625,0.5859375 11.9375,0.5859375 C5.41015625,0.5859375 -0.00390625,6 -0.00390625,12.5390625 C-0.00390625,19.0664062 5.421875,24.4921875 11.9492188,24.4921875 Z M11.9492188,22.5 C6.41796875,22.5 2,18.0703125 2,12.5390625 C2,7.0078125 6.40625,2.578125 11.9375,2.578125 C17.46875,2.578125 21.8984375,7.0078125 21.9101794,12.5390625 C21.921875,18.0703125 17.4804688,22.5 11.9492188,22.5 Z M6.4765625,14.25 C7.4140625,14.25 8.17578125,13.4765625 8.17578125,12.5390625 C8.17578125,11.6015625 7.40234375,10.828125 6.4765625,10.828125 C5.52734375,10.828125 4.765625,11.6015625 4.765625,12.5390625 C4.765625,13.4765625 5.52734375,14.25 6.4765625,14.25 Z M11.9375,14.25 C12.875,14.25 13.6484375,13.4765625 13.6484375,12.5390625 C13.6484375,11.6015625 12.875,10.828125 11.9375,10.828125 C11,10.828125 10.2265625,11.6015625 10.2265625,12.5390625 C10.2265625,13.4765625 11,14.25 11.9375,14.25 Z M17.4101562,14.25 C18.3476562,14.25 19.109375,13.4765625 19.109375,12.5390625 C19.109375,11.6015625 18.3476562,10.828125 17.4101562,10.828125 C16.4609375,10.828125 15.6992188,11.6015625 15.6992188,12.5390625 C15.6992188,13.4765625 16.4609375,14.25 17.4101562,14.25 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<header>
<h1>Devices</h1>
</header>
<nav>
<button data-source="iphone" class="selected secondary">
<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11,0 C12.1045695,-2.02906125e-16 13,0.8954305 13,2 L13,14 C13,15.1045695 12.1045695,16 11,16 L5,16 C3.8954305,16 3,15.1045695 3,14 L3,2 C3,0.8954305 3.8954305,2.02906125e-16 5,0 L11,0 Z M6,1 L5,1 C4.44771525,1 4,1.44771525 4,2 L4,2 L4,14 C4,14.5522847 4.44771525,15 5,15 L5,15 L11,15 C11.5522847,15 12,14.5522847 12,14 L12,14 L12,2 C12,1.44771525 11.5522847,1 11,1 L11,1 L10,1 L10,1.5 C10,1.77614237 9.77614237,2 9.5,2 L6.5,2 C6.22385763,2 6,1.77614237 6,1.5 L6,1 Z M9.5,13 C9.77614237,13 10,13.2238576 10,13.5 C10,13.7761424 9.77614237,14 9.5,14 L6.5,14 C6.22385763,14 6,13.7761424 6,13.5 C6,13.2238576 6.22385763,13 6.5,13 L9.5,13 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<span>iPhone</span>
</button>
<button data-source="ipad">
<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M12.464,0 C13.3123094,0 14,0.57307552 14,1.28 L14,14.72 C14,15.4269245 13.3123094,16 12.464,16 L3.536,16 C2.68769062,16 2,15.4269245 2,14.72 L2,1.28 C2,0.57307552 2.68769062,0 3.536,0 L12.464,0 Z M12.65,1 L3.35,1 C3.18431458,1 3.04551845,1.09210142 3.00924375,1.21579857 L3,1.28 L3,14.72 C3,14.8525483 3.11512678,14.9635852 3.26974821,14.992605 L3.35,15 L12.65,15 C12.8156854,15 12.9544815,14.9078986 12.9907563,14.7842014 L13,14.72 L13,1.28 C13,1.14745166 12.8848732,1.03641476 12.7302518,1.007395 L12.65,1 Z M10.5,13 C10.7761424,13 11,13.2238576 11,13.5 C11,13.7761424 10.7761424,14 10.5,14 L5.5,14 C5.22385763,14 5,13.7761424 5,13.5 C5,13.2238576 5.22385763,13 5.5,13 L10.5,13 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<span>iPad</span>
</button>
<button data-source="ipodtouch" class="">
<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11,0 C11.5522847,-1.01453063e-16 12,0.44771525 12,1 L12,15 C12,15.5522847 11.5522847,16 11,16 L5,16 C4.44771525,16 4,15.5522847 4,15 L4,1 C4,0.44771525 4.44771525,1.01453063e-16 5,0 L11,0 Z M8,13 C7.44771525,13 7,13.4477153 7,14 C7,14.5522847 7.44771525,15 8,15 C8.55228475,15 9,14.5522847 9,14 C9,13.4477153 8.55228475,13 8,13 Z M11,4 L5,4 L5,12 L11,12 L11,4 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<span>iPod touch</span>
</button>
<button data-source="applewatch">
<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M8.5,0 C12.6421356,-7.6089797e-16 16,3.35786438 16,7.5 L16,8.5 C16,12.6421356 12.6421356,16 8.5,16 C6.3690089,16 4.44559561,15.1112537 3.08019867,13.6841997 C2.76871146,13.8837875 2.39792718,14 2,14 C0.8954305,14 1.3527075e-16,13.1045695 0,12 L0,4 C-1.3527075e-16,2.8954305 0.8954305,2 2,2 C2.39792718,2 2.76871146,2.11621254 3.08026503,2.3165498 C4.44515467,0.888950035 6.36876463,3.91501586e-16 8.5,0 Z M8.5,1 C6.63206644,1 4.94641013,1.78042167 3.7513038,3.03299227 C3.90976085,3.31977527 4,3.64934939 4,4 L4,12 C4,12.3506506 3.90976085,12.6802247 3.75123856,12.9667664 C4.94648909,14.2196149 6.63211019,15 8.5,15 C12.045578,15 14.9344309,12.188225 15.0583575,8.67287581 L15.0625,8.4375 L15.0625,7.5625 C15.0625,3.93813133 12.1243687,1 8.5,1 Z M2,4 L1.89607657,4.00533485 C1.88870867,4.00609562 1.8813645,4.00693639 1.87404496,4.00785628 C1.38132444,4.06967531 1,4.49030611 1,5 C1,5.23669346 1.08223341,5.45418029 1.21968877,5.62544899 L1.23257771,5.63945523 L1.23257771,5.63945523 C1.2822008,5.69944618 1.33876096,5.75347937 1.40102945,5.8003567 C1.40845602,5.80641105 1.4161143,5.81198295 1.42385362,5.8174477 L1.40102945,5.8003567 C1.4324153,5.82398479 1.4652514,5.84579488 1.49938038,5.86563355 L1.42385362,5.8174477 C1.4573537,5.84110218 1.49237233,5.86274932 1.52873448,5.8822141 L1.49938038,5.86563355 C1.53151661,5.88431387 1.56479916,5.90124625 1.59909666,5.91630263 L1.52873448,5.8822141 C1.56589311,5.90210524 1.60445476,5.91971736 1.64423263,5.93486365 L1.59909666,5.91630263 C1.63214256,5.93080956 1.66613068,5.9435749 1.70094353,5.95448408 L1.64423263,5.93486365 C1.68194911,5.94922503 1.72075903,5.96136954 1.76050314,5.97113795 L1.70094353,5.95448408 C1.74513308,5.96833161 1.79065147,5.97918841 1.83725836,5.98682018 L1.76050314,5.97113795 C1.79732181,5.98018733 1.83494222,5.98719753 1.87323776,5.99204194 L1.83725836,5.98682018 C1.89021765,5.99549213 1.94458239,6 2,6 L2.0897045,5.99603118 C2.10246499,5.99489675 2.11515654,5.99352263 2.12777463,5.99191335 L2.22929083,5.97358929 C2.67106635,5.86994729 3,5.47338693 3,5 C3,4.76330654 2.91776659,4.54581971 2.78031123,4.37455101 L2.76925683,4.36242567 L2.76925683,4.36242567 C2.72071224,4.30350744 2.66549161,4.25029311 2.60475142,4.20391617 C2.5938968,4.19525733 2.58258021,4.18701287 2.57108752,4.17900354 L2.60475142,4.20391617 C2.5738874,4.18035057 2.54159823,4.15855038 2.50803566,4.13866429 L2.57108752,4.17900354 C2.53664432,4.15499985 2.50061954,4.13310818 2.46320086,4.11351621 L2.50803566,4.13866429 C2.47618761,4.11979407 2.44319293,4.10264741 2.40918127,4.08735135 L2.46320086,4.11351621 C2.42789539,4.09503068 2.39134901,4.07859244 2.35371937,4.06435911 L2.40918127,4.08735135 C2.37031714,4.069873 2.33012513,4.05481098 2.28879868,4.04235489 L2.35371937,4.06435911 C2.31890417,4.05119034 2.28316169,4.039909 2.24661677,4.03063993 L2.28879868,4.04235489 C2.24470961,4.02906612 2.19932935,4.01874332 2.15289277,4.0116167 L2.24661677,4.03063993 C2.20753219,4.02072672 2.16752977,4.01311518 2.12676224,4.00795806 L2.15289277,4.0116167 C2.10304872,4.00396713 2.05198765,4 2,4 Z"
fill="#000000"></path>
</g>
</svg>
<span>Apple Watch</span>
</button>
<button data-source="appletv">
<svg viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M35.8986314,0 L36.7091771,0.00498957481 L37.4620079,0.0199117321 L38.160639,0.0446966211 C38.2727562,0.0496454497 38.3827615,0.0550023149 38.4907282,0.0607657617 L39.1146505,0.100213778 C40.5161217,0.203589103 41.5467285,0.386083951 42.4074179,0.64370519 L42.7664675,0.758702225 C42.8830736,0.79856 42.9967978,0.839939325 43.1082261,0.882828559 L43.4362086,1.01601434 C43.4899196,1.03896304 43.5432031,1.06228632 43.5961323,1.0859827 L43.9100417,1.23262668 L44.2189629,1.38815549 C44.2702294,1.41481348 44.3214344,1.44183876 44.3726514,1.46922987 C46.165244,2.42791888 47.5720811,3.83475604 48.5307701,5.62734863 L48.6907152,5.93509385 C48.7166371,5.9865563 48.7421903,6.03815336 48.7673733,6.08995826 L48.9140173,6.40386765 L49.0517066,6.72628037 C49.118301,6.89019841 49.1815111,7.05862337 49.2412978,7.23353249 L49.3562948,7.59258213 C49.5955145,8.39179373 49.7699569,9.33751572 49.8764248,10.5906375 L49.9207256,11.1914145 C49.9338759,11.3993398 49.9454057,11.6151266 49.9553034,11.839361 L49.9800883,12.5379921 L49.9950104,13.2908229 L50,14.1013686 L50,35.8986314 L49.9950104,36.7091771 L49.9800883,37.4620079 L49.9553034,38.160639 C49.9503546,38.2727562 49.9449977,38.3827615 49.9392342,38.4907282 L49.8997862,39.1146505 C49.7964109,40.5161217 49.613916,41.5467285 49.3562948,42.4074179 L49.2412978,42.7664675 C49.20144,42.8830736 49.1600607,42.9967978 49.1171714,43.1082261 L48.9839857,43.4362086 C48.961037,43.4899196 48.9377137,43.5432031 48.9140173,43.5961323 L48.7673733,43.9100417 L48.6118445,44.2189629 C48.5851865,44.2702294 48.5581612,44.3214344 48.5307701,44.3726514 C47.5720811,46.165244 46.165244,47.5720811 44.3726514,48.5307701 L44.0649062,48.6907152 C44.0134437,48.7166371 43.9618466,48.7421903 43.9100417,48.7673733 L43.5961323,48.9140173 L43.2737196,49.0517066 C43.1098016,49.118301 42.9413766,49.1815111 42.7664675,49.2412978 L42.4074179,49.3562948 C41.6082063,49.5955145 40.6624843,49.7699569 39.4093625,49.8764248 L38.8085855,49.9207256 C38.6006602,49.9338759 38.3848734,49.9454057 38.160639,49.9553034 L37.4620079,49.9800883 L36.7091771,49.9950104 L35.8986314,50 L14.1013686,50 L13.2908229,49.9950104 L12.5379921,49.9800883 L11.839361,49.9553034 C11.7272438,49.9503546 11.6172385,49.9449977 11.5092718,49.9392342 L10.8853495,49.8997862 C9.48387833,49.7964109 8.45327154,49.613916 7.59258213,49.3562948 L7.23353249,49.2412978 C7.11692641,49.20144 7.00320218,49.1600607 6.89177395,49.1171714 L6.5637914,48.9839857 C6.51008036,48.961037 6.45679685,48.9377137 6.40386765,48.9140173 L6.08995826,48.7673733 L5.7810371,48.6118445 C5.72977064,48.5851865 5.67856556,48.5581612 5.62734863,48.5307701 C3.83475604,47.5720811 2.42791888,46.165244 1.46922987,44.3726514 L1.30928485,44.0649062 C1.2833629,44.0134437 1.25780969,43.9618466 1.23262668,43.9100417 L1.0859827,43.5961323 L0.948293385,43.2737196 C0.881699038,43.1098016 0.818488888,42.9413766 0.758702225,42.7664675 L0.64370519,42.4074179 C0.404485468,41.6082063 0.230043094,40.6624843 0.123575191,39.4093625 L0.0792743911,38.8085855 C0.0661240821,38.6006602 0.0545942782,38.3848734 0.0446966211,38.160639 L0.0199117321,37.4620079 L0.00498957481,36.7091771 L0,35.8986314 L0,14.1013686 C0,13.821177 0.0016670722,13.5511904 0.00498957481,13.2908229 L0.0199117321,12.5379921 L0.0446966211,11.839361 C0.0496454497,11.7272438 0.0550023149,11.6172385 0.0607657617,11.5092718 L0.100213778,10.8853495 C0.203589103,9.48387833 0.386083951,8.45327154 0.64370519,7.59258213 L0.758702225,7.23353249 C0.79856,7.11692641 0.839939325,7.00320218 0.882828559,6.89177395 L1.01601434,6.5637914 C1.03896304,6.51008036 1.06228632,6.45679685 1.0859827,6.40386765 L1.23262668,6.08995826 L1.38815549,5.7810371 C1.41481348,5.72977064 1.44183876,5.67856556 1.46922987,5.62734863 C2.42791888,3.83475604 3.83475604,2.42791888 5.62734863,1.46922987 L5.93509385,1.30928485 C5.9865563,1.2833629 6.03815336,1.25780969 6.08995826,1.23262668 L6.40386765,1.0859827 L6.72628037,0.948293385 C6.89019841,0.881699038 7.05862337,0.818488888 7.23353249,0.758702225 L7.59258213,0.64370519 C8.39179373,0.404485468 9.33751572,0.230043094 10.5906375,0.123575191 L11.1914145,0.0792743911 C11.3993398,0.0661240821 11.6151266,0.0545942782 11.839361,0.0446966211 L12.5379921,0.0199117321 L13.2908229,0.00498957481 L14.1013686,0 L35.8986314,0 Z M18.3720703,19.8452148 C17.1723633,19.8452148 16.1982422,20.5732422 15.5727539,20.5732422 C14.90625,20.5732422 14.034668,19.8862305 12.9887695,19.8862305 C11.0097656,19.8862305 9,21.5268555 9,24.6132812 C9,26.5410156 9.73828125,28.5712891 10.6611328,29.8837891 C11.4506836,30.9912109 12.1376953,31.9038086 13.1323242,31.9038086 C14.1166992,31.9038086 14.5473633,31.2475586 15.7675781,31.2475586 C17.0083008,31.2475586 17.2851562,31.8833008 18.3720703,31.8833008 C19.4487305,31.8833008 20.1665039,30.8989258 20.8432617,29.9248047 C21.6020508,28.8071289 21.9199219,27.7202148 21.9301758,27.6689453 C21.8686523,27.6484375 19.8076172,26.8076172 19.8076172,24.4492188 C19.8076172,22.4086914 21.4277344,21.4960938 21.5200195,21.4243164 C20.4536133,19.8862305 18.8232422,19.8452148 18.3720703,19.8452148 Z M27.262207,17.8457031 L24.9960938,17.8457031 L24.9960938,20.6552734 L23.2529297,20.6552734 L23.2529297,22.4086914 L24.9960938,22.4086914 L24.9960938,28.8583984 C24.9960938,31.0014648 26.0009766,31.862793 28.4516602,31.862793 C28.8823242,31.862793 29.2924805,31.8115234 29.6513672,31.75 L29.6513672,29.9760742 C29.34375,30.0068359 29.1489258,30.0170898 28.8105469,30.0170898 C27.7133789,30.0170898 27.262207,29.5249023 27.262207,28.3251953 L27.262207,22.4086914 L29.6513672,22.4086914 L29.6513672,20.6552734 L27.262207,20.6552734 L27.262207,17.8457031 Z M33.6401367,20.6552734 L31.2817383,20.6552734 L35.3115234,31.7910156 L37.6801758,31.7910156 L41.699707,20.6552734 L39.3618164,20.6552734 L36.5932617,29.5351562 L36.4189453,29.5351562 L33.6401367,20.6552734 Z M18.6181641,16 C17.8183594,16.0307617 16.8544922,16.5332031 16.2802734,17.2099609 C15.8291016,17.7226562 15.4086914,18.5429688 15.4086914,19.3632812 C15.4086914,19.4863281 15.4291992,19.609375 15.4394531,19.6503906 C15.4907227,19.6606445 15.5727539,19.6708984 15.6547852,19.6708984 C16.3725586,19.6708984 17.2749023,19.1889648 17.8081055,18.5429688 C18.300293,17.9482422 18.6489258,17.1381836 18.6489258,16.3178711 C18.6489258,16.2050781 18.6386719,16.0922852 18.6181641,16 Z"
id="Combined-Shape-Copy-10" fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<span>Apple TV</span>
</button>
<button data-source="carplay">
<svg viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M5.28317836,45 C6.86813187,45 8.09382925,43.8016173 8.09382925,42.2458221 L8.09382925,38.7137466 C12.7852916,39.0080863 19.5688926,39.2183288 25,39.2183288 C30.4311074,39.2183288 37.2358411,39.0080863 41.9273035,38.7137466 L41.9273035,42.2458221 C41.9273035,43.8016173 43.1318681,45 44.7168216,45 L47.2104818,45 C48.7954353,45 50,43.8016173 50,42.2458221 L50,30.1148248 C50,26.5827493 49.2814877,24.5854447 47.3372781,22.0625337 L45.5409975,19.7708895 C44.7802198,15.9865229 43.364328,12.012938 42.6458157,10.4571429 C41.5046492,8.08140162 39.3279797,6.67277628 36.5173288,6.29433962 C35.1558944,6.13261456 30.824626,6.00976571 25.627657,6.00055503 L25,6 C19.5477599,6 14.9196957,6.14716981 13.5038039,6.29433962 C10.693153,6.63072776 8.4953508,8.08140162 7.37531699,10.4571429 C6.63567202,12.012938 5.24091293,15.9865229 4.45900254,19.7708895 L2.68385461,22.0625337 C0.718512257,24.5854447 0,26.5827493 0,30.1148248 L0,42.2458221 C0,43.8016173 1.22569738,45 2.81065089,45 L5.28317836,45 Z M40.34235,19.0350404 C36.9642466,18.8325846 32.9590611,18.610633 25.835884,18.5944699 L25,18.593531 C17.3710904,18.593531 13.1868132,18.8247978 9.67878276,19.0350404 C8.85460693,19.0981132 8.53761623,18.8037736 8.72781065,18.025876 C9.21386306,15.7132075 10.249366,12.7067385 10.9467456,11.4873315 C11.5173288,10.4991914 12.1301775,10.0787062 13.271344,9.93153639 C14.8774303,9.70026954 18.4699915,9.57412399 25,9.57412399 C31.5511412,9.57412399 35.1437025,9.65822102 36.728656,9.93153639 C37.8698225,10.0997305 38.4615385,10.4991914 39.0532544,11.4873315 C39.7717667,12.6857143 40.7438715,15.7132075 41.2933221,18.025876 C41.4835165,18.8037736 41.1453931,19.0981132 40.34235,19.0350404 Z M9.76331361,33.541779 C7.84023669,33.541779 6.36094675,32.0911051 6.36094675,30.1568733 C6.36094675,28.2436658 7.84023669,26.7929919 9.76331361,26.7929919 C11.6863905,26.7929919 13.1656805,28.2436658 13.1656805,30.1568733 C13.1656805,32.0911051 11.6863905,33.541779 9.76331361,33.541779 Z M40.2366864,33.541779 C38.3136095,33.541779 36.8554522,32.0911051 36.8554522,30.1568733 C36.8554522,28.2436658 38.3136095,26.7929919 40.2366864,26.7929919 C42.180896,26.7929919 43.6390533,28.2436658 43.6390533,30.1568733 C43.6390533,32.0911051 42.180896,33.541779 40.2366864,33.541779 Z M30.6001691,32.7218329 L19.4209637,32.7218329 C17.9628064,32.7218329 16.9695689,31.7126685 16.9695689,30.2830189 C16.9695689,28.8533693 17.9628064,27.8442049 19.4209637,27.8442049 L30.6001691,27.8442049 C32.0371936,27.8442049 33.0304311,28.8533693 33.0304311,30.2830189 C33.0304311,31.7126685 32.0371936,32.7218329 30.6001691,32.7218329 Z"
id="" fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<span>CarPlay</span>
</button>
</nav>
</aside>
<!-- SUPPLEMENTARY COLUMN -->
<div id="supplementary" class="active">
<header>
<button id="buttonSupplementaryBack">
<svg width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<span>Devices</span>
</button>
<h1>iPhone</h1>
</header>
<div id="listDevices">
<div class="containerControlSegmented">
<div class="controlSegmented" id="type">
<button data-type="displays">Displays</button>
<button data-type="models" class="selected">Models</button>
</div>
</div>
<nav>
<button data-id="015" data-model="i12promax" class="selected">
<div>
<img src="images/devices/iphone-i12promax.png" width="50" height="50">
<span>
<p class="name">12 Pro Max</p>
<p class="caption">2020</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="012" data-model="i12pro">
<div>
<img src="images/devices/iphone-i12pro.png" width="50" height="50">
<span>
<p class="name">12 Pro</p>
<p class="caption">2020</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="012" data-model="i12">
<div>
<img src="images/devices/iphone-i12.png" width="50" height="50">
<span>
<p class="name">12</p>
<p class="caption">2020</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="006" data-model="i12mini">
<div>
<img src="images/devices/iphone-i12mini.png" width="50" height="50">
<span>
<p class="name">12 mini</p>
<p class="caption">2020</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="005" data-model="ise2">
<div>
<img src="images/devices/iphone-ise2.png" width="50" height="50">
<span>
<p class="name">SE (2nd Gen)</p>
<p class="caption">2020</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="014" data-model="i11promax">
<div>
<img src="images/devices/iphone-i11promax.png" width="50" height="50">
<span>
<p class="name">11 Pro Max</p>
<p class="caption">2019</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="010" data-model="i11pro">
<div>
<img src="images/devices/iphone-i11pro.png" width="50" height="50">
<span>
<p class="name">11 Pro</p>
<p class="caption">2019</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="011" data-model="i11">
<div>
<img src="images/devices/iphone-i11.png" width="50" height="50">
<span>
<p class="name">11</p>
<p class="caption">2019</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="013" data-model="ixsmax">
<div>
<img src="images/devices/iphone-ixsmax.png" width="50" height="50">
<span>
<p class="name">Xꜱ Max</p>
<p class="caption">2018</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="009" data-model="ixs">
<div>
<img src="images/devices/iphone-ixs.png" width="50" height="50">
<span>
<p class="name">Xꜱ</p>
<p class="caption">2018</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="011" data-model="ixr">
<div>
<img src="images/devices/iphone-ixr.png" width="50" height="50">
<span>
<p class="name">Xʀ</p>
<p class="caption">2018</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="009" data-model="ix">
<div>
<img src="images/devices/iphone-ix.png" width="50" height="50">
<span>
<p class="name">X</p>
<p class="caption">2017</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="008" data-model="i8plus">
<div>
<img src="images/devices/iphone-i8plus.png" width="50" height="50">
<span>
<p class="name">8 Plus</p>
<p class="caption">2017</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="005" data-model="i8">
<div>
<img src="images/devices/iphone-i8.png" width="50" height="50">
<span>
<p class="name">8</p>
<p class="caption">2017</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="008" data-model="i7plus">
<div>
<img src="images/devices/iphone-i7plus.png" width="50" height="50">
<span>
<p class="name">7 Plus</p>
<p class="caption">2016</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="005" data-model="i7">
<div>
<img src="images/devices/iphone-i7.png" width="50" height="50">
<span>
<p class="name">7</p>
<p class="caption">2016</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="007" data-model="i6splus">
<div>
<img src="images/devices/iphone-i6splus.png" width="50" height="50">
<span>
<p class="name">6s Plus</p>
<p class="caption">2015</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="004" data-model="i6s">
<div>
<img src="images/devices/iphone-i6s.png" width="50" height="50">
<span>
<p class="name">6s</p>
<p class="caption">2015</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="007" data-model="i6plus">
<div>
<img src="images/devices/iphone-i6plus.png" width="50" height="50">
<span>
<p class="name">6 Plus</p>
<p class="caption">2014</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="004" data-model="i6">
<div>
<img src="images/devices/iphone-i6.png" width="50" height="50">
<span>
<p class="name">6</p>
<p class="caption">2014</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="003" data-model="ise1">
<div>
<img src="images/devices/iphone-ise1.png" width="50" height="50">
<span>
<p class="name">SE (1st Gen)</p>
<p class="caption">2016</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="003" data-model="i5s">
<div>
<img src="images/devices/iphone-i5s.png" width="50" height="50">
<span>
<p class="name">5s</p>
<p class="caption">2013</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="003" data-model="i5c">
<div>
<img src="images/devices/iphone-i5c.png" width="50" height="50">
<span>
<p class="name">5c</p>
<p class="caption">2013</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="003" data-model="i5">
<div>
<img src="images/devices/iphone-i5.png" width="50" height="50">
<span>
<p class="name">5</p>
<p class="caption">2012</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="002" data-model="i4s">
<div>
<img src="images/devices/iphone-i4s.png" width="50" height="50">
<span>
<p class="name">4S</p>
<p class="caption">2011</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="002" data-model="i4">
<div>
<img src="images/devices/iphone-i4.png" width="50" height="50">
<span>
<p class="name">4</p>
<p class="caption">2010</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="001" data-model="i3gs">
<div>
<img src="images/devices/iphone-i3gs.png" width="50" height="50">
<span>
<p class="name">3GS</p>
<p class="caption">2009</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="001" data-model="i3g">
<div>
<img src="images/devices/iphone-i3g.png" width="50" height="50">
<span>
<p class="name">3G</p>
<p class="caption">2008</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<button data-id="001" data-model="i2g">
<div>
<img src="images/devices/iphone-i2g.png" width="50" height="50">
<span>
<p class="name">iPhone</p>
<p class="caption">2007</p>
</span>
</div>
<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
</nav>
</div>
</div>
<!-- MAIN COLUMN -->
<main class="active">
<header>
<button id="buttonMainBack">
<svg width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</button>
<h1>12 Pro Max</h1>
</header>
<div id="result">
<div class="containerControlSegmented">
<div class="controlSegmented" id="zoom">
<button data-zoom="standard" class="selected">Standard</button>
<button data-zoom="zoomed">Zoomed</button>
</div>
</div>
<section id="details">
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M23,2 C24.6568542,2 26,3.34314575 26,5 L26,26 C26,27.6568542 24.6568542,29 23,29 L7,29 C5.34314575,29 4,27.6568542 4,26 L4,5 C4,3.34314575 5.34314575,2 7,2 L23,2 Z M23,4 L7,4 C6.48716416,4 6.06449284,4.38604019 6.00672773,4.88337887 L6,5 L6,26 C6,26.5128358 6.38604019,26.9355072 6.88337887,26.9932723 L7,27 L23,27 C23.5128358,27 23.9355072,26.6139598 23.9932723,26.1166211 L24,26 L24,5 C24,4.48716416 23.6139598,4.06449284 23.1166211,4.00672773 L23,4 Z M10,23 L10,25 L8,25 L8,23 L10,23 Z M14,23 L14,25 L12,25 L12,23 L14,23 Z M18,23 L18,25 L16,25 L16,23 L18,23 Z M22,23 L22,25 L20,25 L20,23 L22,23 Z M10,14 L10,16 L8,16 L8,14 L10,14 Z M14,14 L14,16 L12,16 L12,14 L14,14 Z M10,10 L10,12 L8,12 L8,10 L10,10 Z M14,10 L14,12 L12,12 L12,10 L14,10 Z M18,10 L18,12 L16,12 L16,10 L18,10 Z M22,10 L22,12 L20,12 L20,10 L22,10 Z M10,6 L10,8 L8,8 L8,6 L10,6 Z M14,6 L14,8 L12,8 L12,6 L14,6 Z M18,6 L18,8 L16,8 L16,6 L18,6 Z M22,6 L22,8 L20,8 L20,6 L22,6 Z"
id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">Resolution</p>
<div class="containerMeasurement">
<div class="measurement">
<p class="label">@1×</p>
<p class="value">428 × 926 px</p>
</div>
<div class="measurement scale">
<p class="label">@3×</p>
<p class="value">1284 × 2778 px</p>
</div>
</div>
</div>
</div>
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M21.6212182,1.00133451 L22.2005011,1.01197139 L22.7222154,1.03314496 C23.9589245,1.09916262 24.7052509,1.26298161 25.3311198,1.51725094 L25.5759198,1.62376526 L25.8131322,1.73982307 C25.8523276,1.75995552 25.891426,1.78048126 25.9305371,1.80139811 C26.9083149,2.32431939 27.6756806,3.09168511 28.1986019,4.06946289 L28.2601769,4.18686782 L28.3762347,4.42408019 L28.4827491,4.6688802 C28.7200671,5.2530245 28.8785928,5.94210069 28.9523497,7.03687164 L28.9787524,7.53177451 C28.982282,7.61869035 28.9853748,7.70789527 28.9880286,7.79949889 L28.9986655,8.37878179 L28.9996661,8.53321416 L28.9996661,8.53321416 L29,21.3083444 L28.9946707,21.9183846 C28.9928971,22.0148952 28.9906824,22.1088975 28.9880286,22.2005011 L28.966855,22.7222154 C28.9008374,23.9589245 28.7370184,24.7052509 28.4827491,25.3311198 L28.3762347,25.5759198 L28.2601769,25.8131322 C28.2400445,25.8523276 28.2195187,25.891426 28.1986019,25.9305371 C27.6756806,26.9083149 26.9083149,27.6756806 25.9305371,28.1986019 L25.8131322,28.2601769 L25.5759198,28.3762347 L25.3311198,28.4827491 C24.7469755,28.7200671 24.0578993,28.8785928 22.9631284,28.9523497 L22.4682255,28.9787524 C22.3813097,28.982282 22.2921047,28.9853748 22.2005011,28.9880286 L21.6212182,28.9986655 L21.4667858,28.9996661 L21.4667858,28.9996661 L8.6916556,29 L8.08161544,28.9946707 C7.98510482,28.9928971 7.89110251,28.9906824 7.79949889,28.9880286 L7.27778464,28.966855 C6.04107551,28.9008374 5.29474909,28.7370184 4.6688802,28.4827491 L4.42408019,28.3762347 L4.18686782,28.2601769 C4.14767244,28.2400445 4.108574,28.2195187 4.06946289,28.1986019 C3.09168511,27.6756806 2.32431939,26.9083149 1.80139811,25.9305371 L1.73982307,25.8131322 L1.62376526,25.5759198 L1.51725094,25.3311198 C1.2799329,24.7469755 1.12140716,24.0578993 1.04765033,22.9631284 L1.02124762,22.4682255 C1.01771797,22.3813097 1.01462517,22.2921047 1.01197139,22.2005011 L1.00133451,21.6212182 L1.00133451,8.37878179 L1.01197139,7.79949889 L1.03314496,7.27778464 C1.09916262,6.04107551 1.26298161,5.29474909 1.51725094,4.6688802 L1.62376526,4.42408019 L1.73982307,4.18686782 C1.75995552,4.14767244 1.78048126,4.108574 1.80139811,4.06946289 C2.32431939,3.09168511 3.09168511,2.32431939 4.06946289,1.80139811 L4.18686782,1.73982307 L4.42408019,1.62376526 L4.6688802,1.51725094 C5.2530245,1.2799329 5.94210069,1.12140716 7.03687164,1.04765033 L7.53177451,1.02124762 C7.61869035,1.01771797 7.70789527,1.01462517 7.79949889,1.01197139 L8.37878179,1.00133451 L21.6212182,1.00133451 Z M12.8676758,11.0507812 C10.5849609,11.0507812 9.13476562,12.6083984 9.13476562,15.1166992 L9.13476562,15.1274414 C9.13476562,17.6303711 10.5634766,19.1987305 12.8676758,19.1987305 C15.1557617,19.1987305 16.5952148,17.6303711 16.5952148,15.1274414 L16.5952148,15.1166992 C16.5952148,12.6137695 15.1503906,11.0507812 12.8676758,11.0507812 Z M20.8974609,11.0507812 C19.1787109,11.0507812 17.9433594,12.0014648 17.9433594,13.440918 L17.9433594,13.4462891 C17.9433594,14.6225586 18.6362305,15.3745117 20.2475586,15.7021484 L21.0639648,15.8686523 C22.0253906,16.0673828 22.4067383,16.3520508 22.4067383,16.8623047 L22.4067383,16.8676758 C22.4067383,17.4638672 21.8105469,17.8774414 20.9458008,17.8774414 C20.0380859,17.8774414 19.409668,17.4853516 19.3505859,16.9052734 L19.3452148,16.8515625 L17.7822266,16.8515625 L17.7875977,16.9375 C17.8789062,18.3125 19.0498047,19.1987305 20.902832,19.1987305 C22.8364258,19.1987305 24.0288086,18.2265625 24.0288086,16.6904297 L24.0288086,16.6850586 C24.0288086,15.4765625 23.3144531,14.8212891 21.6762695,14.4829102 L20.8544922,14.3164062 C19.9414062,14.128418 19.5654297,13.8276367 19.5654297,13.3227539 L19.5654297,13.3173828 C19.5654297,12.7373047 20.097168,12.3720703 20.8974609,12.3666992 C21.7138672,12.3666992 22.2509766,12.753418 22.3422852,13.3066406 L22.3530273,13.3710938 L23.878418,13.3710938 L23.8730469,13.3012695 C23.7709961,12.0068359 22.7075195,11.0507812 20.8974609,11.0507812 Z M7.74365234,13.0864258 L6.17529297,13.0864258 L6.17529297,19 L7.74365234,19 L7.74365234,13.0864258 Z M12.8676758,12.4257812 C14.1245117,12.4257812 14.940918,13.4731445 14.940918,15.1166992 L14.940918,15.1274414 C14.940918,16.765625 14.1298828,17.8237305 12.8676758,17.8237305 C11.5893555,17.8237305 10.7890625,16.765625 10.7890625,15.1274414 L10.7890625,15.1166992 C10.7890625,13.4731445 11.6054688,12.4257812 12.8676758,12.4257812 Z M6.96484375,10.4331055 C6.48144531,10.4331055 6.07861328,10.8198242 6.07861328,11.3085938 C6.07861328,11.7919922 6.48144531,12.1787109 6.96484375,12.1787109 C7.44824219,12.1787109 7.84570312,11.7919922 7.84570312,11.3085938 C7.84570312,10.8198242 7.44824219,10.4331055 6.96484375,10.4331055 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">Last Supported By</p>
<p class="value">iOS 14</p>
</div>
</div>
<details>
<summary>Properties</summary>
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M24.8613281,26.34375 C25.4238281,26.34375 25.7871094,25.96875 25.7871094,25.40625 L25.7871094,5.6953125 C25.7871094,5.1328125 25.4238281,4.76953125 24.8613281,4.76953125 L5.15039062,4.76953125 C4.58789062,4.76953125 4.21289062,5.1328125 4.21289062,5.6953125 L4.21289062,25.40625 C4.21289062,25.96875 4.58789062,26.34375 5.15039062,26.34375 L24.8613281,26.34375 Z M14.0566406,24.4570312 L6.43945312,24.4570312 C6.19335938,24.4570312 6.09960938,24.3632812 6.09960938,24.1171875 L6.09960938,16.4882812 C6.22851562,16.546875 6.36914062,16.5703125 6.52148438,16.5703125 C7.09570312,16.5703125 7.56445312,16.1132812 7.56445312,15.5390625 C7.56445312,14.9648438 7.09570312,14.4960938 6.52148438,14.4960938 C6.36914062,14.4960938 6.22851562,14.53125 6.09960938,14.5898438 L6.09960938,6.99609375 C6.09960938,6.73828125 6.19335938,6.65625 6.43945312,6.65625 L14.0449219,6.65625 C13.9863281,6.7734375 13.9628906,6.9140625 13.9628906,7.06640625 C13.9628906,7.640625 14.4316406,8.09765625 15.0058594,8.09765625 C15.5800781,8.09765625 16.0371094,7.640625 16.0371094,7.06640625 C16.0371094,6.9140625 16.0136719,6.7734375 15.9550781,6.65625 L23.5605469,6.65625 C23.8183594,6.65625 23.9003906,6.73828125 23.9003906,6.99609375 L23.9003906,14.5898438 C23.7714844,14.53125 23.6308594,14.4960938 23.4785156,14.4960938 C22.9042969,14.4960938 22.4355469,14.9648438 22.4355469,15.5390625 C22.4355469,16.1132812 22.9042969,16.5703125 23.4785156,16.5703125 C23.6308594,16.5703125 23.7714844,16.546875 23.9003906,16.4882812 L23.9003906,24.1171875 C23.9003906,24.3632812 23.8183594,24.4570312 23.5605469,24.4570312 L15.9433594,24.4570312 C16.0019531,24.328125 16.0371094,24.1757812 16.0371094,24.0117188 C16.0371094,23.4375 15.5800781,22.9804688 15.0058594,22.9804688 C14.4316406,22.9804688 13.9628906,23.4375 13.9628906,24.0117188 C13.9628906,24.1757812 13.9980469,24.328125 14.0566406,24.4570312 Z M15.0058594,10.921875 C15.5800781,10.921875 16.0371094,10.453125 16.0371094,9.87890625 C16.0371094,9.3046875 15.5800781,8.84765625 15.0058594,8.84765625 C14.4316406,8.84765625 13.9628906,9.3046875 13.9628906,9.87890625 C13.9628906,10.453125 14.4316406,10.921875 15.0058594,10.921875 Z M15.0058594,13.7578125 C15.5800781,13.7578125 16.0371094,13.2890625 16.0371094,12.7148438 C16.0371094,12.140625 15.5800781,11.6835938 15.0058594,11.6835938 C14.4316406,11.6835938 13.9628906,12.140625 13.9628906,12.7148438 C13.9628906,13.2890625 14.4316406,13.7578125 15.0058594,13.7578125 Z M15.0058594,16.5703125 C15.5800781,16.5703125 16.0371094,16.1132812 16.0371094,15.5390625 C16.0371094,14.9648438 15.5800781,14.4960938 15.0058594,14.4960938 C14.4316406,14.4960938 13.9628906,14.9648438 13.9628906,15.5390625 C13.9628906,16.1132812 14.4316406,16.5703125 15.0058594,16.5703125 Z M9.34570312,16.5703125 C9.91992188,16.5703125 10.3886719,16.1132812 10.3886719,15.5390625 C10.3886719,14.9648438 9.91992188,14.4960938 9.34570312,14.4960938 C8.77148438,14.4960938 8.31445312,14.9648438 8.31445312,15.5390625 C8.31445312,16.1132812 8.77148438,16.5703125 9.34570312,16.5703125 Z M12.1816406,16.5703125 C12.7558594,16.5703125 13.2128906,16.1132812 13.2128906,15.5390625 C13.2128906,14.9648438 12.7558594,14.4960938 12.1816406,14.4960938 C11.6074219,14.4960938 11.1503906,14.9648438 11.1503906,15.5390625 C11.1503906,16.1132812 11.6074219,16.5703125 12.1816406,16.5703125 Z M17.8300781,16.5703125 C18.4042969,16.5703125 18.8613281,16.1132812 18.8613281,15.5390625 C18.8613281,14.9648438 18.4042969,14.4960938 17.8300781,14.4960938 C17.2558594,14.4960938 16.7871094,14.9648438 16.7871094,15.5390625 C16.7871094,16.1132812 17.2558594,16.5703125 17.8300781,16.5703125 Z M20.6542969,16.5703125 C21.2285156,16.5703125 21.6972656,16.1132812 21.6972656,15.5390625 C21.6972656,14.9648438 21.2285156,14.4960938 20.6542969,14.4960938 C20.0800781,14.4960938 19.6230469,14.9648438 19.6230469,15.5390625 C19.6230469,16.1132812 20.0800781,16.5703125 20.6542969,16.5703125 Z M15.0058594,19.3945312 C15.5800781,19.3945312 16.0371094,18.9375 16.0371094,18.3632812 C16.0371094,17.7890625 15.5800781,17.3203125 15.0058594,17.3203125 C14.4316406,17.3203125 13.9628906,17.7890625 13.9628906,18.3632812 C13.9628906,18.9375 14.4316406,19.3945312 15.0058594,19.3945312 Z M15.0058594,22.2304688 C15.5800781,22.2304688 16.0371094,21.7617188 16.0371094,21.1875 C16.0371094,20.6132812 15.5800781,20.15625 15.0058594,20.15625 C14.4316406,20.15625 13.9628906,20.6132812 13.9628906,21.1875 C13.9628906,21.7617188 14.4316406,22.2304688 15.0058594,22.2304688 Z"
id="" fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">PPI</p>
<p class="value">458</p>
</div>
</div>
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M13.3398438,14.5 C14.0078125,14.5 14.5,14.0664062 14.5,13.4101562 C14.5,13.09375 14.3945312,12.8125 14.1835938,12.6015625 L10.5625,8.9921875 L7.31640625,5.91015625 L11.4179688,6.14453125 L12.390625,6.14453125 C13.0117188,6.14453125 13.4921875,5.7109375 13.4921875,5.078125 C13.4921875,4.4453125 13.0234375,4 12.390625,4 L5.88671875,4 C4.69140625,4 4,4.69140625 4,5.88671875 L4,12.390625 C4,13 4.45703125,13.4804688 5.078125,13.4804688 C5.69921875,13.4804688 6.14453125,13.0117188 6.14453125,12.390625 L6.14453125,11.40625 L5.91015625,7.31640625 L8.9921875,10.5625 L12.6015625,14.1953125 C12.8007812,14.40625 13.0585938,14.5 13.3398438,14.5 Z M24.4375,26.359375 C25.6328125,26.359375 26.3359375,25.6679688 26.3359375,24.4726562 L26.3359375,17.96875 C26.3359375,17.359375 25.8789062,16.8789062 25.2460938,16.8789062 C24.6367188,16.8789062 24.1796875,17.3476562 24.1796875,17.96875 L24.1796875,18.953125 L24.4257812,23.0429688 L21.3320312,19.796875 L17.734375,16.1640625 C17.5351562,15.953125 17.265625,15.859375 16.984375,15.859375 C16.328125,15.859375 15.8242188,16.2929688 15.8242188,16.9492188 C15.8242188,17.265625 15.9414062,17.546875 16.1523438,17.7578125 L19.7617188,21.3671875 L23.0195312,24.4492188 L18.9179688,24.2148438 L17.9335938,24.2148438 C17.3125,24.2148438 16.8320312,24.6484375 16.8320312,25.28125 C16.8320312,25.9140625 17.3125,26.359375 17.9335938,26.359375 L24.4375,26.359375 Z"
id="" fill="#000000" fill-rule="nonzero"
transform="translate(15.167969, 15.179688) scale(-1, 1) translate(-15.167969, -15.179688) "></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">Aspect Ratio</p>
<p class="value">19.5:9</p>
</div>
</div>
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M15,3 C21.627417,3 27,8.372583 27,15 C27,21.5254567 21.7914556,26.8343928 15.3049748,26.9962001 L15,27 L15,27 C8.372583,27 3,21.627417 3,15 C3,8.372583 8.372583,3 15,3 Z M15,5 C9.4771525,5 5,9.4771525 5,15 C5,20.5228475 9.4771525,25 15,25 L15,5 L15,5 Z"
id="Combined-Shape" fill="#000000"></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">Contrast Ratio</p>
<p class="value">2,000,000:1</p>
</div>
</div>
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M14.9941406,23.7070312 C15.5566406,23.7070312 16.0253906,24.1757812 16.0253906,24.7265625 L16.0253906,24.7265625 L16.0253906,27.1875 C16.0253906,27.7382812 15.5566406,28.2070312 14.9941406,28.2070312 C14.4433594,28.2070312 13.9746094,27.7382812 13.9746094,27.1875 L13.9746094,27.1875 L13.9746094,24.7265625 C13.9746094,24.1757812 14.4433594,23.7070312 14.9941406,23.7070312 Z M20.7832031,21.2929688 C21.1816406,20.90625 21.8378906,20.90625 22.2246094,21.2929688 L22.2246094,21.2929688 L23.9824219,23.0390625 C24.3808594,23.4375 24.3808594,24.09375 23.9824219,24.4804688 C23.5957031,24.8671875 22.9394531,24.8789062 22.5527344,24.4921875 L22.5527344,24.4921875 L20.7832031,22.734375 C20.3964844,22.3359375 20.3964844,21.6796875 20.7832031,21.2929688 Z M7.75195312,21.2929688 C8.15039062,20.90625 8.81835938,20.90625 9.20507812,21.2929688 C9.59179688,21.6914062 9.59179688,22.3476562 9.19335938,22.734375 L9.19335938,22.734375 L7.44726562,24.4804688 C7.04882812,24.8671875 6.38085938,24.8554688 5.99414062,24.46875 C5.61914062,24.0820312 5.61914062,23.4140625 6.00585938,23.0273438 L6.00585938,23.0273438 Z M20.762651,17.0001027 C20.0849374,19.5569649 17.7343767,21.4804688 14.9941406,21.4804688 C12.2440476,21.4804688 9.89192085,19.5569649 9.21395846,17.0001027 Z M26.6542969,14.4726562 C27.2167969,14.4726562 27.6855469,14.9414062 27.6855469,15.4921875 C27.6855469,16.0429688 27.2167969,16.5117188 26.6542969,16.5117188 L26.6542969,16.5117188 L24.2050781,16.5117188 C23.6542969,16.5117188 23.1855469,16.0429688 23.1855469,15.4921875 C23.1855469,14.9414062 23.6542969,14.4726562 24.2050781,14.4726562 L24.2050781,14.4726562 Z M5.78320312,14.4726562 C6.34570312,14.4726562 6.81445312,14.9414062 6.81445312,15.4921875 C6.81445312,16.0429688 6.34570312,16.5117188 5.78320312,16.5117188 L5.78320312,16.5117188 L3.33398438,16.5117188 C2.78320312,16.5117188 2.31445312,16.0429688 2.31445312,15.4921875 C2.31445312,14.9414062 2.78320312,14.4726562 3.33398438,14.4726562 L3.33398438,14.4726562 Z M20.9384166,14.9998243 C20.952035,15.1623154 20.9589844,15.3265294 20.9589844,15.4921875 C20.9589844,15.6629585 20.9515994,15.8322269 20.9371366,15.9996838 L9.03942754,15.9996838 C9.02496312,15.8322269 9.01757812,15.6629585 9.01757812,15.4921875 C9.01757812,15.3265294 9.02452753,15.1623154 9.03814739,14.9998243 Z M20.405169,13.0000094 C20.5542022,13.3195458 20.6757303,13.6539049 20.7665724,13.9999231 L9.21003567,13.9999231 C9.30091077,13.6539049 9.42249571,13.3195458 9.57162693,13.0000094 Z M18.9018595,11.0001323 C19.2417198,11.2979979 19.5483103,11.6333779 19.8147422,11.9994208 L10.1625527,11.9994208 C10.4292718,11.6333569 10.7362549,11.2979594 11.0766496,11.000081 Z M14.9941406,9.515625 C15.8170776,9.515625 16.6048699,9.68835759 17.3227622,9.99925639 L12.6588081,9.99920657 C13.3783231,9.68833914 14.1682875,9.515625 14.9941406,9.515625 Z M22.5527344,6.50390625 C22.9394531,6.1171875 23.5957031,6.1171875 23.9824219,6.50390625 C24.3808594,6.90234375 24.3808594,7.55859375 23.9824219,7.95703125 L23.9824219,7.95703125 L22.2363281,9.703125 C22.0633257,9.88121573 21.8417175,9.97976973 21.613713,10.0016649 L21.4168394,10.0016438 C21.1849645,9.97942637 20.9589918,9.8789137 20.7832031,9.703125 C20.3964844,9.31640625 20.3964844,8.66015625 20.7832031,8.26171875 L20.7832031,8.26171875 Z M6.01757812,6.50390625 C6.41601562,6.1171875 7.08398438,6.12890625 7.45898438,6.50390625 L7.45898438,6.50390625 L9.20507812,8.26171875 C9.59179688,8.6484375 9.59179688,9.328125 9.19335938,9.703125 C8.80664062,10.1015625 8.15039062,10.1015625 7.75195312,9.703125 L7.75195312,9.703125 L6.00585938,7.9453125 C5.63085938,7.55859375 5.63085938,6.890625 6.01757812,6.50390625 Z M14.9941406,2.77734375 C15.5566406,2.77734375 16.0253906,3.24609375 16.0253906,3.796875 L16.0253906,3.796875 L16.0253906,6.2578125 C16.0253906,6.80859375 15.5566406,7.27734375 14.9941406,7.27734375 C14.4433594,7.27734375 13.9746094,6.80859375 13.9746094,6.2578125 L13.9746094,6.2578125 L13.9746094,3.796875 C13.9746094,3.24609375 14.4433594,2.77734375 14.9941406,2.77734375 Z"
id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">True Tone</p>
<p class="value">Supported</p>
</div>
</div>
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M20.359375,26.6132812 C20.8867188,26.6132812 21.3085938,26.1914062 21.3085938,25.6757812 C21.3085938,25.1484375 20.8867188,24.7148438 20.359375,24.7148438 L18.9179688,24.7148438 L18.5898438,22.453125 L25.9257812,22.453125 C27.9296875,22.453125 28.9375,21.4921875 28.9375,19.4414062 L28.9375,6.01171875 C28.9375,3.9609375 27.9296875,3 25.9257812,3 L4.01171875,3 C2.0078125,3 1,3.9609375 1,6.01171875 L1,19.4414062 C1,21.4921875 2.0078125,22.453125 4.01171875,22.453125 L11.3476562,22.453125 L11.0078125,24.7148438 L9.68359375,24.7148438 C9.16796875,24.7148438 8.74609375,25.1484375 8.74609375,25.6757812 C8.74609375,26.1914062 9.16796875,26.6132812 9.68359375,26.6132812 L20.359375,26.6132812 Z M25.890625,20.5664062 L4.046875,20.5664062 C3.23828125,20.5664062 2.88671875,20.2382812 2.88671875,19.4179688 L2.88671875,6.046875 C2.88671875,5.21484375 3.23828125,4.88671875 4.046875,4.88671875 L25.890625,4.88671875 C26.6875,4.88671875 27.0507812,5.21484375 27.0507812,6.046875 L27.0507812,19.4179688 C27.0507812,20.2382812 26.6875,20.5664062 25.890625,20.5664062 Z"
id="" fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">Display Type</p>
<p class="value">6.7" Display P3 XDR Retina OLED</p>
</div>
</div>
</details>
</section>
<h3>Safe Areas</h3>
<section id="safeAreas">
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect fill="#000000" x="6" y="3" width="18" height="4"></rect>
<path d="M23,1 C24.6568542,1 26,2.34314575 26,4 L26,26 C26,27.6568542 24.6568542,29 23,29 L7,29 C5.34314575,29 4,27.6568542 4,26 L4,4 C4,2.34314575 5.34314575,1 7,1 L23,1 Z M23,3 L7,3 C6.48716416,3 6.06449284,3.38604019 6.00672773,3.88337887 L6,4 L6,26 C6,26.5128358 6.38604019,26.9355072 6.88337887,26.9932723 L7,27 L23,27 C23.5128358,27 23.9355072,26.6139598 23.9932723,26.1166211 L24,26 L24,4 C24,3.48716416 23.6139598,3.06449284 23.1166211,3.00672773 L23,3 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">Portrait Status Bar</p>
<div class="containerMeasurement">
<div class="measurement">
<p class="label">@1×</p>
<p class="value">47 px</p>
</div>
<div class="measurement scale">
<p class="label">@3×</p>
<p class="value">141 px</p>
</div>
</div>
</div>
</div>
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect fill="#000000" x="3" y="6" width="24" height="4"></rect>
<path d="M26,4 C27.6568542,4 29,5.34314575 29,7 L29,23 C29,24.6568542 27.6568542,26 26,26 L4,26 C2.34314575,26 1,24.6568542 1,23 L1,7 C1,5.34314575 2.34314575,4 4,4 L26,4 Z M26,6 L4,6 C3.48716416,6 3.06449284,6.38604019 3.00672773,6.88337887 L3,7 L3,23 C3,23.5128358 3.38604019,23.9355072 3.88337887,23.9932723 L4,24 L26,24 C26.5128358,24 26.9355072,23.6139598 26.9932723,23.1166211 L27,23 L27,7 C27,6.48716416 26.6139598,6.06449284 26.1166211,6.00672773 L26,6 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">Landscape Status Bar</p>
<div class="containerMeasurement">
<div class="measurement">
<p class="label">@1×</p>
<p class="value">0 px</p>
</div>
<div class="measurement scale">
<p class="label">@3×</p>
<p class="value">0 px</p>
</div>
</div>
</div>
</div>
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect fill="#000000" x="6" y="23" width="18" height="4"></rect>
<path d="M23,1 C24.6568542,1 26,2.34314575 26,4 L26,26 C26,27.6568542 24.6568542,29 23,29 L7,29 C5.34314575,29 4,27.6568542 4,26 L4,4 C4,2.34314575 5.34314575,1 7,1 L23,1 Z M23,3 L7,3 C6.48716416,3 6.06449284,3.38604019 6.00672773,3.88337887 L6,4 L6,26 C6,26.5128358 6.38604019,26.9355072 6.88337887,26.9932723 L7,27 L23,27 C23.5128358,27 23.9355072,26.6139598 23.9932723,26.1166211 L24,26 L24,4 C24,3.48716416 23.6139598,3.06449284 23.1166211,3.00672773 L23,3 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">Portrait Home Indicator</p>
<div class="containerMeasurement">
<div class="measurement">
<p class="label">@1×</p>
<p class="value">34 px</p>
</div>
<div class="measurement scale">
<p class="label">@3×</p>
<p class="value">102 px</p>
</div>
</div>
</div>
</div>
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect fill="#000000" x="3" y="20" width="24" height="4"></rect>
<path d="M26,4 C27.6568542,4 29,5.34314575 29,7 L29,23 C29,24.6568542 27.6568542,26 26,26 L4,26 C2.34314575,26 1,24.6568542 1,23 L1,7 C1,5.34314575 2.34314575,4 4,4 L26,4 Z M26,6 L4,6 C3.48716416,6 3.06449284,6.38604019 3.00672773,6.88337887 L3,7 L3,23 C3,23.5128358 3.38604019,23.9355072 3.88337887,23.9932723 L4,24 L26,24 C26.5128358,24 26.9355072,23.6139598 26.9932723,23.1166211 L27,23 L27,7 C27,6.48716416 26.6139598,6.06449284 26.1166211,6.00672773 L26,6 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">Landscape Home Indicator</p>
<div class="containerMeasurement">
<div class="measurement">
<p class="label">@1×</p>
<p class="value">21 px</p>
</div>
<div class="measurement scale">
<p class="label">@3×</p>
<p class="value">63 px</p>
</div>
</div>
</div>
</div>
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect fill="#000000" x="10" y="3" width="10" height="4"></rect>
<path d="M23,1 C24.6568542,1 26,2.34314575 26,4 L26,26 C26,27.6568542 24.6568542,29 23,29 L7,29 C5.34314575,29 4,27.6568542 4,26 L4,4 C4,2.34314575 5.34314575,1 7,1 L23,1 Z M23,3 L7,3 C6.48716416,3 6.06449284,3.38604019 6.00672773,3.88337887 L6,4 L6,26 C6,26.5128358 6.38604019,26.9355072 6.88337887,26.9932723 L7,27 L23,27 C23.5128358,27 23.9355072,26.6139598 23.9932723,26.1166211 L24,26 L24,4 C24,3.48716416 23.6139598,3.06449284 23.1166211,3.00672773 L23,3 Z"
fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">Notch Size</p>
<div class="containerMeasurement">
<div class="measurement">
<p class="label">@1×</p>
<p class="value">210 × 32 px</p>
</div>
<div class="measurement scale">
<p class="label">@3×</p>
<p class="value">630 × 96 px</p>
</div>
</div>
</div>
</div>
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect fill="#000000" x="6" y="3" width="4" height="4"></rect>
<rect fill="#000000" x="20" y="3" width="4" height="4"></rect>
<path d="M23,1 C24.6568542,1 26,2.34314575 26,4 L26,26 C26,27.6568542 24.6568542,29 23,29 L7,29 C5.34314575,29 4,27.6568542 4,26 L4,4 C4,2.34314575 5.34314575,1 7,1 L23,1 Z M23,3 L7,3 C6.48716416,3 6.06449284,3.38604019 6.00672773,3.88337887 L6,4 L6,26 C6,26.5128358 6.38604019,26.9355072 6.88337887,26.9932723 L7,27 L23,27 C23.5128358,27 23.9355072,26.6139598 23.9932723,26.1166211 L24,26 L24,4 C24,3.48716416 23.6139598,3.06449284 23.1166211,3.00672773 L23,3 Z"
id="Rectangle-Copy-18" fill-rule="nonzero"></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">Ear Size</p>
<div class="containerMeasurement">
<div class="measurement">
<p class="label">@1×</p>
<p class="value">109 × 32 px</p>
</div>
<div class="measurement scale">
<p class="label">@3×</p>
<p class="value">327 × 96 px</p>
</div>
</div>
</div>
</div>
</section>
<p>When creating your layout you should not hard code fixed sizes. Learn more about using <a
href="https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/"
target="_blank">Adaptive Layout</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/env()"
target="_blank">CSS Environment Variables</a>.</p>
<h3>Size Classes</h3>
<section id="sizeClasses">
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect fill="#000000" x="6" y="3" width="18" height="24"></rect>
<path d="M23,1 C24.6568542,1 26,2.34314575 26,4 L26,26 C26,27.6568542 24.6568542,29 23,29 L7,29 C5.34314575,29 4,27.6568542 4,26 L4,4 C4,2.34314575 5.34314575,1 7,1 L23,1 Z M23,3 L7,3 C6.48716416,3 6.06449284,3.38604019 6.00672773,3.88337887 L6,4 L6,26 C6,26.5128358 6.38604019,26.9355072 6.88337887,26.9932723 L7,27 L23,27 C23.5128358,27 23.9355072,26.6139598 23.9932723,26.1166211 L24,26 L24,4 C24,3.48716416 23.6139598,3.06449284 23.1166211,3.00672773 L23,3 Z"
id="Rectangle-Copy-18" fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">Portrait</p>
<div class="containerMeasurement">
<div class="measurement">
<p class="label">Width</p>
<p class="value">Compact</p>
</div>
<div class="measurement">
<p class="label">Height</p>
<p class="value">Regular</p>
</div>
</div>
</div>
</div>
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect fill="#000000" x="3" y="6" width="24" height="18"></rect>
<path d="M26,4 C27.6568542,4 29,5.34314575 29,7 L29,23 C29,24.6568542 27.6568542,26 26,26 L4,26 C2.34314575,26 1,24.6568542 1,23 L1,7 C1,5.34314575 2.34314575,4 4,4 L26,4 Z M26,6 L4,6 C3.48716416,6 3.06449284,6.38604019 3.00672773,6.88337887 L3,7 L3,23 C3,23.5128358 3.38604019,23.9355072 3.88337887,23.9932723 L4,24 L26,24 C26.5128358,24 26.9355072,23.6139598 26.9932723,23.1166211 L27,23 L27,7 C27,6.48716416 26.6139598,6.06449284 26.1166211,6.00672773 L26,6 Z"
id="Rectangle-Copy-14" fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">Landscape</p>
<div class="containerMeasurement">
<div class="measurement">
<p class="label">Width</p>
<p class="value">Regular</p>
</div>
<div class="measurement">
<p class="label">Height</p>
<p class="value">Compact</p>
</div>
</div>
</div>
</div>
</section>
<h3>Widgets</h3>
<section id="widgets">
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect fill="#000000" x="0" y="0" width="14" height="14" rx="3"></rect>
<path d="M5,24 C5.55228475,24 6,24.4477153 6,25 L6,29 C6,29.5522847 5.55228475,30 5,30 L1,30 C0.44771525,30 -3.76453835e-16,29.5522847 0,29 L0,25 C-6.76353751e-17,24.4477153 0.44771525,24 1,24 L5,24 Z M21,24 C21.5522847,24 22,24.4477153 22,25 L22,29 C22,29.5522847 21.5522847,30 21,30 L17,30 C16.4477153,30 16,29.5522847 16,29 L16,25 C16,24.4477153 16.4477153,24 17,24 L21,24 Z M13,24 C13.5522847,24 14,24.4477153 14,25 L14,29 C14,29.5522847 13.5522847,30 13,30 L9,30 C8.44771525,30 8,29.5522847 8,29 L8,25 C8,24.4477153 8.44771525,24 9,24 L13,24 Z M29,24 C29.5522847,24 30,24.4477153 30,25 L30,29 C30,29.5522847 29.5522847,30 29,30 L25,30 C24.4477153,30 24,29.5522847 24,29 L24,25 C24,24.4477153 24.4477153,24 25,24 L29,24 Z M5,16 C5.55228475,16 6,16.4477153 6,17 L6,21 C6,21.5522847 5.55228475,22 5,22 L1,22 C0.44771525,22 -3.76453835e-16,21.5522847 0,21 L0,17 C-6.76353751e-17,16.4477153 0.44771525,16 1,16 L5,16 Z M21,16 C21.5522847,16 22,16.4477153 22,17 L22,21 C22,21.5522847 21.5522847,22 21,22 L17,22 C16.4477153,22 16,21.5522847 16,21 L16,17 C16,16.4477153 16.4477153,16 17,16 L21,16 Z M13,16 C13.5522847,16 14,16.4477153 14,17 L14,21 C14,21.5522847 13.5522847,22 13,22 L9,22 C8.44771525,22 8,21.5522847 8,21 L8,17 C8,16.4477153 8.44771525,16 9,16 L13,16 Z M29,16 C29.5522847,16 30,16.4477153 30,17 L30,21 C30,21.5522847 29.5522847,22 29,22 L25,22 C24.4477153,22 24,21.5522847 24,21 L24,17 C24,16.4477153 24.4477153,16 25,16 L29,16 Z M21,8 C21.5522847,8 22,8.44771525 22,9 L22,13 C22,13.5522847 21.5522847,14 21,14 L17,14 C16.4477153,14 16,13.5522847 16,13 L16,9 C16,8.44771525 16.4477153,8 17,8 L21,8 Z M29,8 C29.5522847,8 30,8.44771525 30,9 L30,13 C30,13.5522847 29.5522847,14 29,14 L25,14 C24.4477153,14 24,13.5522847 24,13 L24,9 C24,8.44771525 24.4477153,8 25,8 L29,8 Z M21,0 C21.5522847,-1.01453063e-16 22,0.44771525 22,1 L22,5 C22,5.55228475 21.5522847,6 21,6 L17,6 C16.4477153,6 16,5.55228475 16,5 L16,1 C16,0.44771525 16.4477153,-3.42636147e-16 17,0 L21,0 Z M29,0 C29.5522847,-1.01453063e-16 30,0.44771525 30,1 L30,5 C30,5.55228475 29.5522847,6 29,6 L25,6 C24.4477153,6 24,5.55228475 24,5 L24,1 C24,0.44771525 24.4477153,-3.42636147e-16 25,0 L29,0 Z"
fill="#000000" opacity="0.2"></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">Small</p>
<div class="containerMeasurement">
<div class="measurement">
<p class="label">@1×</p>
<p class="value">170 × 170 px</p>
</div>
<div class="measurement">
<p class="label">@3×</p>
<p class="value">510 × 510 px</p>
</div>
</div>
</div>
</div>
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect fill="#000000" x="0" y="0" width="30" height="14" rx="3"></rect>
<path d="M5,24 C5.55228475,24 6,24.4477153 6,25 L6,29 C6,29.5522847 5.55228475,30 5,30 L1,30 C0.44771525,30 -3.76453835e-16,29.5522847 0,29 L0,25 C-6.76353751e-17,24.4477153 0.44771525,24 1,24 L5,24 Z M21,24 C21.5522847,24 22,24.4477153 22,25 L22,29 C22,29.5522847 21.5522847,30 21,30 L17,30 C16.4477153,30 16,29.5522847 16,29 L16,25 C16,24.4477153 16.4477153,24 17,24 L21,24 Z M13,24 C13.5522847,24 14,24.4477153 14,25 L14,29 C14,29.5522847 13.5522847,30 13,30 L9,30 C8.44771525,30 8,29.5522847 8,29 L8,25 C8,24.4477153 8.44771525,24 9,24 L13,24 Z M29,24 C29.5522847,24 30,24.4477153 30,25 L30,29 C30,29.5522847 29.5522847,30 29,30 L25,30 C24.4477153,30 24,29.5522847 24,29 L24,25 C24,24.4477153 24.4477153,24 25,24 L29,24 Z M5,16 C5.55228475,16 6,16.4477153 6,17 L6,21 C6,21.5522847 5.55228475,22 5,22 L1,22 C0.44771525,22 -3.76453835e-16,21.5522847 0,21 L0,17 C-6.76353751e-17,16.4477153 0.44771525,16 1,16 L5,16 Z M21,16 C21.5522847,16 22,16.4477153 22,17 L22,21 C22,21.5522847 21.5522847,22 21,22 L17,22 C16.4477153,22 16,21.5522847 16,21 L16,17 C16,16.4477153 16.4477153,16 17,16 L21,16 Z M13,16 C13.5522847,16 14,16.4477153 14,17 L14,21 C14,21.5522847 13.5522847,22 13,22 L9,22 C8.44771525,22 8,21.5522847 8,21 L8,17 C8,16.4477153 8.44771525,16 9,16 L13,16 Z M29,16 C29.5522847,16 30,16.4477153 30,17 L30,21 C30,21.5522847 29.5522847,22 29,22 L25,22 C24.4477153,22 24,21.5522847 24,21 L24,17 C24,16.4477153 24.4477153,16 25,16 L29,16 Z"
fill="#000000" opacity="0.2"></path>
</g>
</svg>
<div class="rowTitle">
<p class="name">Medium</p>
<div class="containerMeasurement">
<div class="measurement">
<p class="label">@1×</p>
<p class="value">364 × 170 px</p>
</div>
<div class="measurement">
<p class="label">@3×</p>
<p class="value">1092 × 510 px</p>
</div>
</div>
</div>
</div>
<div class="row">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect fill="#000000" x="0" y="0" width="30" height="30" rx="3"></rect>
</g>
</svg>
<div class="rowTitle">
<p class="name">Large</p>
<div class="containerMeasurement">
<div class="measurement">
<p class="label">@1×</p>
<p class="value">364 × 383 px</p>
</div>
<div class="measurement">
<p class="label">@3×</p>
<p class="value">1092 × 1149 px</p>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<script src="./ScreenSizes_files/jquery.min.js"></script>
<script>
function showRefreshUI(registration) {
// Inject update notification
var notification = document.createElement('h4');
notification.textContent = 'Updating Screen Sizes';
notification.addEventListener('click', function () {
if (!registration.waiting) {
// Just to ensure registration.waiting is available before
// calling postMessage()
return;
}
notification.disabled = true;
registration.waiting.postMessage('skipWaiting');
});
document.body.appendChild(notification);
};
function onNewServiceWorker(registration, callback) {
if (registration.waiting) {
// SW is waiting to activate. Can occur if multiple clients open and
// one of the clients is refreshed.
return callback();
}
function listenInstalledStateChange() {
registration.installing.addEventListener('statechange', function (event) {
if (event.target.state === 'installed') {
// A new service worker is available, inform the user
callback();
}
});
};
if (registration.installing) {
return listenInstalledStateChange();
}
// We are currently controlled so a new SW may be found...
// Add a listener in case a new SW is found,
registration.addEventListener('updatefound', listenInstalledStateChange);
}
window.addEventListener('load', function () {
var refreshing;
// When the user asks to refresh the UI, we'll need to reload the window
navigator.serviceWorker.addEventListener('controllerchange', function (event) {
if (refreshing) return; // prevent infinite refresh loop when you use "Update on Reload"
refreshing = true;
console.log('Controller loaded');
window.location.reload();
});
navigator.serviceWorker.register('/sw.js')
.then(function (registration) {
// Track updates to the Service Worker.
if (!navigator.serviceWorker.controller) {
// The window client isn't currently controlled so it's a new service
// worker that will activate immediately
return;
}
registration.update();
onNewServiceWorker(registration, function () {
showRefreshUI(registration);
});
});
});
</script>
<script src="./ScreenSizes_files/devices.js"></script>
<script src="./ScreenSizes_files/deviceIcons.js"></script>
<script src="./ScreenSizes_files/app.js"></script>
<div id="containerInstall">
<div id="panelInstall">
<button>
<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill-rule="evenodd">
<path d="M1.47292423,14.6766374 C0.64878803,14.6766374 0,14.0103146 0,13.2037132 C0,12.8004126 0.1578133,12.4497163 0.43837033,12.1866942 L5.27797833,7.32955131 L0.43837033,2.47240841 C0.17534811,2.20938631 0,1.85869001 0,1.47292421 C0,0.64878801 0.64878803,0.01753481 1.47292423,0.01753481 C1.87622483,0.01753481 2.20938623,0.17534812 2.47240843,0.43837031 L7.34708613,5.29551311 L12.2392986,0.43837031 C12.5198556,0.12274368 12.853017,0 13.2387828,0 C14.0453842,0 14.711707,0.63125321 14.711707,1.45538941 C14.711707,1.84115521 14.5714285,2.17431661 14.2733367,2.45487361 L9.41619393,7.32955131 L14.2558019,12.1516245 C14.5188241,12.4497163 14.6941722,12.7828778 14.6941722,13.2037132 C14.6941722,14.0103146 14.0453842,14.6766374 13.221248,14.6766374 C12.8004126,14.6766374 12.4497163,14.5012893 12.1866941,14.2382671 L7.34708613,9.38112431 L2.50747803,14.2382671 C2.24445593,14.5188241 1.87622483,14.6766374 1.47292423,14.6766374 Z"
id="reset_dark-path"></path>
</g>
</svg>
</button>
<h1>Install Screen Sizes</h1>
<p>Tap <img src="./images/ui/share.svg" alt="the share button" width="20" height="25"> and then <img
src="./images/ui/addto.svg" alt="" width="20" height="20"><span>Add to Home Screen</span></p>
</div>
</div>
<div id="HUABAN_WIDGETS">
<div class="HUABAN-f-button" style="display: none;">采集</div>
<style>#HUABAN_WIDGETS {
font-family: "helvetica neue", arial, sans-serif;
color: #444;
font-size: 14px;
}
#HUABAN_WIDGETS * {
box-sizing: content-box;
}
#HUABAN_WIDGETS .HUABAN-main {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #e5e5e5;
background: rgba(229, 229, 229, .95);
max-height: 100%;
overflow: hidden;
z-index: 9999999999999;
}
#HUABAN_WIDGETS a img {
border: 0;
}
#HUABAN_WIDGETS .HUABAN-header {
height: 50px;
background: white;
box-shadow: 0 0 4px rgba(0, 0, 0, .2);
width: 100%;
left: 0;
top: 0;
position: absolute;
}
#HUABAN_WIDGETS .HUABAN-header .HUABAN-inner {
margin: 0 auto;
position: relative;
}
#HUABAN_WIDGETS .HUABAN-header .HUABAN-close {
width: 60px;
height: 50px;
border-left: 1px solid #ddd;
position: absolute;
right: 0;
top: 0;
background: url(https://huaban.com/img/widgets/btn_close.png) 20px 14px no-repeat;
cursor: pointer;
}
#HUABAN_WIDGETS .HUABAN-header .HUABAN-close:hover {
background-position: 20px -26px;
}
#HUABAN_WIDGETS .HUABAN-header .HUABAN-close:active {
background-position: 20px -66px;
}
#HUABAN_WIDGETS .HUABAN-header .HUABAN-logo {
display: block;
position: absolute;
top: 12px;
}
#HUABAN_WIDGETS .HUABAN-waterfall-holder {
position: relative;
overflow-y: auto;
height: 100%;
}
#HUABAN_WIDGETS .HUABAN-waterfall {
position: relative;
margin-top: 50px;
}
#HUABAN_WIDGETS .HUABAN-waterfall .HUABAN-empty {
position: absolute;
left: 50%;
top: 30px;
height: 36px;
line-height: 36px;
width: 216px;
text-align: left;
margin-left: -128px;
color: #777;
background: url(https://huaban.com/img/widgets/icon_notice.png) 12px 8px no-repeat white;
padding-left: 40px;
font-size: 15px;
}
#HUABAN_WIDGETS .HUABAN-btn {
display: inline-block;
border-radius: 2px;
font-size: 14px;
padding: 0 12px;
height: 30px;
line-height: 30px;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
text-align: center;
background: #D53939;
color: white;
}
#HUABAN_WIDGETS .HUABAN-btn:hover {
background: #E54646;
}
#HUABAN_WIDGETS .HUABAN-btn:active {
background: #C52424;
}
#HUABAN_WIDGETS .HUABAN-wbtn {
background: #EDEDED;
color: #444;
}
#HUABAN_WIDGETS .HUABAN-wbtn:hover {
background: #F2F2F2;
}
#HUABAN_WIDGETS .HUABAN-wbtn:active {
background: #DDD;
}
#HUABAN_WIDGETS .HUABAN-f-button {
position: absolute;
display: none;
z-index: 9999999999998;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .2);
background: #aaa;
background: rgba(0, 0, 0, .3);
color: white;
cursor: pointer;
padding: 0 12px;
height: 30px;
line-height: 30px;
border-radius: 2px;
font-size: 14px
}
#HUABAN_WIDGETS .HUABAN-f-button:hover {
background-color: #999;
background-color: rgba(0, 0, 0, .5);
}
#HUABAN_WIDGETS .HUABAN-f-button:active {
background-color: rgba(0, 0, 0, .6);
}
#HUABAN_WIDGETS .HUABAN-red-normal-icon-button {
width: 36px;
height: 24px;
border: 0px;
line-height: 24px;
padding-left: 24px;
padding-right: 0px;
text-align: left;
background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -200px no-repeat;
box-shadow: none !important;
font-size: 14px;
background-color: transparent !important;
}
#HUABAN_WIDGETS .HUABAN-red-normal-icon-button:hover {
background-position: -130px -200px;
}
#HUABAN_WIDGETS .HUABAN-red-normal-icon-button:active {
background-position: -260px -200px;
}
#HUABAN_WIDGETS .HUABAN-red-large-icon-button {
width: 80px;
height: 24px;
border: 0px;
line-height: 24px;
padding-left: 24px;
padding-right: 0px;
text-align: left;
background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -150px no-repeat;
box-shadow: none !important;
font-size: 14px;
background-color: transparent !important;
}
#HUABAN_WIDGETS .HUABAN-red-large-icon-button:hover {
background-position: -130px -150px;
}
#HUABAN_WIDGETS .HUABAN-red-large-icon-button:active {
background-position: -260px -150px;
}
#HUABAN_WIDGETS .HUABAN-red-small-icon-button {
width: 30px;
height: 21px;
border: 0px;
line-height: 21px;
padding-left: 20px;
padding-right: 0px;
text-align: left;
background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -250px no-repeat;
box-shadow: none !important;
font-size: 12px;
background-color: transparent !important;
}
#HUABAN_WIDGETS .HUABAN-red-small-icon-button:hover {
background-position: -130px -250px;
}
#HUABAN_WIDGETS .HUABAN-red-small-icon-button:active {
background-position: -260px -250px;
}
#HUABAN_WIDGETS .HUABAN-white-normal-icon-button {
width: 36px;
height: 24px;
border: 0px;
line-height: 24px;
padding-left: 24px;
padding-right: 0px;
text-align: left;
background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -500px no-repeat;
box-shadow: none !important;
color: #444;
font-size: 14px;
background-color: transparent !important;
}
#HUABAN_WIDGETS .HUABAN-white-normal-icon-button:hover {
background-position: -130px -500px;
}
#HUABAN_WIDGETS .HUABAN-white-normal-icon-button:active {
background-position: -260px -500px;
}
#HUABAN_WIDGETS .HUABAN-white-large-icon-button {
width: 80px;
height: 24px;
border: 0px;
line-height: 24px;
padding-left: 24px;
padding-right: 0px;
text-align: left;
background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -450px no-repeat;
box-shadow: none !important;
color: #444;
font-size: 14px;
background-color: transparent !important;
}
#HUABAN_WIDGETS .HUABAN-white-large-icon-button:hover {
background-position: -130px -450px;
}
#HUABAN_WIDGETS .HUABAN-white-large-icon-button:active {
background-position: -260px -450px;
}
#HUABAN_WIDGETS .HUABAN-white-small-icon-button {
width: 30px;
height: 21px;
border: 0px;
line-height: 21px;
padding-left: 20px;
padding-right: 0px;
text-align: left;
background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -550px no-repeat;
box-shadow: none !important;
color: #444;
font-size: 12px;
background-color: transparent !important;
}
#HUABAN_WIDGETS .HUABAN-white-small-icon-button:hover {
background-position: -130px -550px;
}
#HUABAN_WIDGETS .HUABAN-white-small-icon-button:active {
background-position: -260px -550px;
}
#HUABAN_WIDGETS .HUABAN-cell {
width: 236px;
position: absolute;
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
transition: left .3s ease-in-out, top .3s linear;
}
#HUABAN_WIDGETS .HUABAN-cell .HUABAN-img-holder {
overflow: hidden;
position: relative;
}
#HUABAN_WIDGETS .HUABAN-cell .HUABAN-img-holder:hover img.HUABAN-cell-img {
opacity: .8
}
#HUABAN_WIDGETS .HUABAN-cell .HUABAN-video-icon {
width: 72px;
height: 62px;
position: absolute;
left: 50%;
top: 50%;
margin: -31px auto auto -36px;
background: url(https://huaban.com/img/widgets/media_video.png) 0 0 no-repeat;
display: none;
}
#HUABAN_WIDGETS .HUABAN-cell.HUABAN-video .HUABAN-video-icon {
display: block;
}
#HUABAN_WIDGETS .HUABAN-cell .HUABAN-over {
display: none;
}
#HUABAN_WIDGETS .HUABAN-cell:hover .HUABAN-over {
display: block;
}
#HUABAN_WIDGETS .HUABAN-cell .HUABAN-over .HUABAN-btn {
width: 60px;
height: 34px;
padding: 0;
position: absolute;
left: 50%;
top: 50%;
margin: -18px 0 0 -31px;
line-height: 34px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .2);
font-size: 16px;
}
#HUABAN_WIDGETS .HUABAN-cell.HUABAN-long .HUABAN-img-holder {
height: 600px;
}
#HUABAN_WIDGETS .HUABAN-cell.HUABAN-long .HUABAN-img-holder:after {
content: "";
display: block;
position: absolute;
width: 236px;
height: 12px;
left: 0;
bottom: 0;
background: url(https://huaban.com/img/widgets/long_image_shadow_2.png) repeat-x 4px top;
}
#HUABAN_WIDGETS .HUABAN-cell img {
width: 236px;
display: block;
}
#HUABAN_WIDGETS .HUABAN-cell .HUABAN-size {
margin: 8px 16px;
font-size: 12px;
color: #999
}
#HUABAN_WIDGETS .HUABAN-cell .HUABAN-description {
display: block;
width: 202px;
margin: 0 6px 6px;
padding: 6px 10px;
border: 0;
resize: none;
outline: 0;
border: 1px solid transparent;
line-height: 18px;
font-size: 13px;
overflow: hidden;
word-wrap: break-word;
background: url(https://huaban.com/img/widgets/icon_edit.png) 500px center no-repeat;
}
#HUABAN_WIDGETS .HUABAN-cell:hover .HUABAN-description {
background-color: #fff9e0;
background-position: right top;
}
#HUABAN_WIDGETS .HUABAN-cell .HUABAN-description:focus {
background-color: #F9F9F9;
background-position: 500px center;
}
#HUABAN_WIDGETS .HUABAN-cell .HUABAN-select-btn {
width: 34px;
height: 34px;
background: url(https://huaban.com/img/widgets/checkbox.png) 0 0 no-repeat;
position: absolute;
right: 5px;
top: 5px;
cursor: pointer;
}
#HUABAN_WIDGETS .HUABAN-cell .HUABAN-pinned-label {
position: absolute;
left: 0;
top: 10px;
height: 24px;
line-height: 24px;
padding: 0 10px;
background: #CE0000;
background: rgba(200, 0, 0, 0.9);
color: white;
font-size: 12px;
display: none;
}
#HUABAN_WIDGETS .HUABAN-cell.HUABAN-pinned .HUABAN-pinned-label {
display: block;
}
#HUABAN_WIDGETS .HUABAN-selected .HUABAN-select-btn {
background-position: 0 -40px;
}
#HUABAN_WIDGETS .HUABAN-multi .HUABAN-cell .HUABAN-img-holder {
cursor: pointer;
}
#HUABAN_WIDGETS .HUABAN-multi .HUABAN-cell .HUABAN-cell-pin-btn {
display: none;
}
#HUABAN_WIDGETS .HUABAN-multi .HUABAN-cell .HUABAN-over {
display: block;
}
#HUABAN_WIDGETS .HUABAN-header .HUABAN-multi-buttons {
position: absolute;
top: 10px;
left: 0;
display: none;
}
#HUABAN_WIDGETS .HUABAN-header .HUABAN-multi-buttons .HUABAN-btn {
margin-right: 10px;
}
#HUABAN_WIDGETS .HUABAN-header .HUABAN-multi-noti {
display: none;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 16px;
color: #999;
font-weight: bold;
}
#HUABAN_WIDGETS .HUABAN-header .HUABAN-multi-noti span {
font-weight: normal;
}
#HUABAN_WIDGETS .HUABAN-header .HUABAN-multi-noti i {
font-style: normal;
}
#HUABAN_WIDGETS .HUABAN-header .HUABAN-notice {
padding: 0 10px;
height: 30px;
line-height: 30px;
position: absolute;
left: 50%;
top: 10px;
margin-left: -83px;
background: #fff9e2;
text-align: center;
}
#HUABAN_WIDGETS .HUABAN-header .HUABAN-notice i {
display: inline-block;
width: 18px;
height: 18px;
background: url(https://huaban.com/img/widgets/icon_notice.png) 0 0 no-repeat;
vertical-align: top;
margin: 6px 6px 0 0;
}
#HUABAN_WIDGETS .HUABAN-switcher {
height: 50px;
width: 100px;
position: relative;
}
#HUABAN_WIDGETS .HUABAN-switcher .HUABAN-title {
position: absolute;
right: 75px;
top: 13px;
color: #999;
white-space: nowrap;
line-height: 24px;
opacity: 0;
visibility: hidden;
}
#HUABAN_WIDGETS .HUABAN-switcher:hover .HUABAN-title {
visibility: visible;
opacity: 1;
-webkit-transition: opacity .2s linear;
-webkit-transition-delay: .2s;
transition: opacity .2s linear;
transition-delay: .2s;
}
#HUABAN_WIDGETS .HUABAN-switcher .HUABAN-bar {
width: 40px;
height: 24px;
background: #EB595F;
border-radius: 12px;
color: white;
position: absolute;
right: 0;
top: 13px;
cursor: pointer;
font-size: 14px;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
#HUABAN_WIDGETS .HUABAN-switcher:hover .HUABAN-bar {
width: 64px;
}
#HUABAN_WIDGETS .HUABAN-switcher.HUABAN-on .HUABAN-bar {
background: #7DD100;
}
#HUABAN_WIDGETS .HUABAN-switcher .HUABAN-bar .HUABAN-round {
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
position: absolute;
left: 2px;
top: 2px;
-webkit-transition: left .2s linear;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
transition: left .2s linear;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
}
#HUABAN_WIDGETS .HUABAN-switcher.HUABAN-on .HUABAN-bar .HUABAN-round {
left: 17px;
}
#HUABAN_WIDGETS .HUABAN-switcher.HUABAN-on:hover .HUABAN-bar .HUABAN-round {
left: 41px;
}
#HUABAN_WIDGETS .HUABAN-switcher .HUABAN-bar .HUABAN-text-1 {
height: 24px;
line-height: 24px;
position: absolute;
right: 17px;
top: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
#HUABAN_WIDGETS .HUABAN-switcher:hover .HUABAN-bar .HUABAN-text-1 {
right: 9px;
opacity: 1;
visibility: visible;
}
#HUABAN_WIDGETS .HUABAN-switcher.HUABAN-on:hover .HUABAN-bar .HUABAN-text-1 {
right: 17px;
opacity: 0;
visibility: hidden;
}
#HUABAN_WIDGETS .HUABAN-switcher .HUABAN-bar .HUABAN-text-2 {
height: 24px;
line-height: 24px;
position: absolute;
left: 17px;
top: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
#HUABAN_WIDGETS .HUABAN-switcher:hover .HUABAN-bar .HUABAN-text-2 {
left: 17px;
opacity: 0;
visibility: hidden;
}
#HUABAN_WIDGETS .HUABAN-switcher.HUABAN-on:hover .HUABAN-bar .HUABAN-text-2 {
left: 9px;
opacity: 1;
visibility: visible;
}
#HUABAN_WIDGETS .HUABAN-header .HUABAN-switcher {
position: absolute;
right: 0;
top: 0;
}
<!--
[if IE
6
]
> #HUABAN_WIDGETS .HUABAN-red-normal-icon-button, .HUABAN-red-large-icon-button, .HUABAN-red-small-icon-button, .HUABAN-white-normal-icon-button, .HUABAN-white-large-icon-button, .HUABAN-white-small-icon-button {
background-image: url({{imgBase}}/widget_icons_ie6.png) < ! [endif] --></style>
</div>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手