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
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 Plus | 430 x 932 | 1290 x 2796 | 6.7″ | 3.0 | 460 | 153 | |
Apple iPhone 15 Pro | 393 x 852 | 1179 x 2556 | 6.1″ | 3.0 | 461 | 153 | |
Apple iPhone 15 | 393 x 852 | 1179 x 2556 | 6.1″ | 3.0 | 461 | 153 | |
Apple iPhone SE (2022) | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
Apple iPhone 14 Pro Max | 430 x 932 | 1290 x 2796 | 6.7″ | 3.0 | 460 | 153 | |
Apple iPhone 14 Plus | 428 x 926 | 1284 x 2778 | 6.7″ | 3.0 | 458 | 153 | |
Apple iPhone 14 Pro | 393 x 852 | 1179 x 2556 | 6.1″ | 3.0 | 460 | 153 | |
Apple iPhone 14 | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | |
Apple iPhone 13 mini | 360 x 780 | 1080 x 2340 | 5.4″ | 3.0 | 476 | 159 | |
Apple iPhone 13 Pro Max | 428 x 926 | 1284 x 2778 | 6.7″ | 3.0 | 458 | 153 | |
Apple iPhone 13 Pro | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | |
Apple iPhone 13 | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | |
Apple iPhone 12 mini | 360 x 780 | 1080 x 2340 | 5.4″ | 3.0 | 476 | 159 | |
Apple iPhone 12 Pro Max | 428 x 926 | 1284 x 2778 | 6.7″ | 3.0 | 458 | 153 | |
Apple iPhone 12 Pro | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | |
Apple iPhone 12 | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | |
Apple iPhone SE (2020) | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
Apple iPhone 11 Pro Max | 414 x 896 | 1242 x 2688 | 6.5″ | 3.0 | 458 | 153 | |
Apple iPhone 11 Pro | 375 x 812 | 1125 x 2436 | 5.8″ | 3.0 | 458 | 153 | |
Apple iPhone 11 | 414 x 896 | 828 x 1792 | 6.1″ | 2.0 | 326 | 163 | |
Apple iPhone XS Max | 414 x 896 | 1242 x 2688 | 6.5″ | 3.0 | 458 | 153 | |
Apple iPhone XR | 414 x 896 | 828 x 1792 | 6.1″ | 2.0 | 326 | 163 | |
Apple iPhone X | 375 x 812 | 1125 x 2436 | 5.8″ | 3.0 | 458 | 153 | |
Apple iPhone 8 | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
Apple iPhone 8 Plus | 414 x 736 | 1080 x 1920 | 5.5″ | 3.0 | 401 | 134 | |
Apple iPhone 7 | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
Apple iPhone 7 Plus | 414 x 736 | 1080 x 1920 | 5.5″ | 3.0 | 401 | 134 | |
Apple iPhone 6s Plus | 414 x 736 | 1080 x 1920 | 5.5″ | 3.0 | 401 | 134 | |
Apple iPhone SE | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | |
Apple iPhone 6s | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
Apple iPhone 6 | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
Apple iPhone 5s | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | |
Apple iPhone 5c | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | |
Apple iPhone 5 | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 |