We are Humans & We stand with PALESTINE We are Humans & We stand with PALESTINE.
Viewport Size, Resolution and CSS Media Queries

Viewport Sizes for iPhone

Apple iPhone have Retina Display, Which means iPhone screen shows 2x or 3x higher resolution display instead of normal display to our Eye.

In Retina display, ONE pixel may contains many more pixels, thats why Retina Display or Device Dimensions got bigger and we see high resolution of images and content in smaller display. However devices' actual dimensions depends on actual Pixels Per Inch which is called "Viewport Size" of device or "device-width". Web designs for mobile or CSS responsive styles are based on viewport size of devices, Click here to see popular devices viewport table.

Here we list down all Apple iPhone models with their viewport size, resolution, pixel density, screen size and CSS media queries respectively:

Sponsored
Viewport Size Table for iPhone models
Device
Name
Viewport
SizePX
Device
Resolution PX
Screen
Size
Pixel
Ratio
Density
PPI
CSS
PPI
Media
Queries
Apple iPhone 15 Pro Max 430 x 932 1290 x 2796 6.7″ 3.0 460 153 Apple iPhone 15 Pro Max CSS Media Query
Apple iPhone 15 Plus 430 x 932 1290 x 2796 6.7″ 3.0 460 153 Apple iPhone 15 Plus CSS Media Query
Apple iPhone 15 Pro 393 x 852 1179 x 2556 6.1″ 3.0 461 153 Apple iPhone 15 Pro CSS Media Query
Apple iPhone 15 393 x 852 1179 x 2556 6.1″ 3.0 461 153 Apple iPhone 15 CSS Media Query
Apple iPhone SE (2022) 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone 14 SE 2022 CSS Media Query
Apple iPhone 14 Pro Max 430 x 932 1290 x 2796 6.7″ 3.0 460 153 Apple iPhone 14 Pro Max CSS Media Query
Apple iPhone 14 Plus 428 x 926 1284 x 2778 6.7″ 3.0 458 153 Apple iPhone 14 Plus CSS Media Query
Apple iPhone 14 Pro 393 x 852 1179 x 2556 6.1″ 3.0 460 153 Apple iPhone 14 Pro CSS Media Query
Apple iPhone 14 390 x 844 1170 x 2532 6.1″ 3.0 460 153 Apple iPhone 14 CSS Media Query
Apple iPhone 13 mini 360 x 780 1080 x 2340 5.4″ 3.0 476 159 Apple iPhone 13 Mini CSS Media Query
Apple iPhone 13 Pro Max 428 x 926 1284 x 2778 6.7″ 3.0 458 153 Apple iPhone 13 Pro Max CSS Media Query
Apple iPhone 13 Pro 390 x 844 1170 x 2532 6.1″ 3.0 460 153 Apple iPhone 13 Pro CSS Media Query
Apple iPhone 13 390 x 844 1170 x 2532 6.1″ 3.0 460 153 Apple iPhone 13 CSS Media Query
Apple iPhone 12 mini 360 x 780 1080 x 2340 5.4″ 3.0 476 159 Apple iPhone 12 Mini CSS Media Query
Apple iPhone 12 Pro Max 428 x 926 1284 x 2778 6.7″ 3.0 458 153 Apple iPhone 12 Pro Max CSS Media Query
Apple iPhone 12 Pro 390 x 844 1170 x 2532 6.1″ 3.0 460 153 Apple iPhone 12 Pro CSS Media Query
Apple iPhone 12 390 x 844 1170 x 2532 6.1″ 3.0 460 153 Apple iPhone 12 CSS Media Query
Apple iPhone SE (2020) 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone SE CSS Media Query
Apple iPhone 11 Pro Max 414 x 896 1242 x 2688 6.5″ 3.0 458 153 Apple iPhone 11 Pro Max CSS Media Query
Apple iPhone 11 Pro 375 x 812 1125 x 2436 5.8″ 3.0 458 153 Apple iPhone 11 Pro CSS Media Query
Apple iPhone 11 414 x 896 828 x 1792 6.1″ 2.0 326 163 Apple iPhone 11 CSS Media Query
Apple iPhone XS Max 414 x 896 1242 x 2688 6.5″ 3.0 458 153 Apple iPhone XS Max CSS Media Query
Apple iPhone XR 414 x 896 828 x 1792 6.1″ 2.0 326 163 Apple iPhone XR CSS Media Query
Apple iPhone X 375 x 812 1125 x 2436 5.8″ 3.0 458 153 Apple iPhone X CSS Media Query
Apple iPhone 8 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone 8 CSS Media Query
Apple iPhone 8 Plus 414 x 736 1080 x 1920 5.5″ 3.0 401 134 Apple iPhone 8 Plus CSS Media Query
Apple iPhone 7 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone 7 CSS Media Query
Apple iPhone 7 Plus 414 x 736 1080 x 1920 5.5″ 3.0 401 134 Apple iPhone 7 Plus CSS Media Query
Apple iPhone 6s Plus 414 x 736 1080 x 1920 5.5″ 3.0 401 134 Apple iPhone 6s Plus CSS Media Query
Apple iPhone SE 320 x 568 640 x 1136 4.0″ 2.0 326 163 Apple iPhone SE CSS Media Query
Apple iPhone 6s 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone 6s CSS Media Query
Apple iPhone 6 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone 6 CSS Media Query
Apple iPhone 5s 320 x 568 640 x 1136 4.0″ 2.0 326 163 Apple iPhone 5s CSS Media Query
Apple iPhone 5c 320 x 568 640 x 1136 4.0″ 2.0 326 163 Apple iPhone 5c CSS Media Query
Apple iPhone 5 320 x 568 640 x 1136 4.0″ 2.0 326 163 Apple iPhone 5 CSS Media Query
Cookies

This website uses cookies, We and our partners use technology such as cookies to analyse our traffic and to show you personalised content and ads. You consent to our cookies by clicking "Agree" or by continuing to use our website.