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:

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 SE (2020) 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone 11 Pro Max 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 Pro CSS Media Query
Apple iPhone XS Max 414 x 896 1242 x 2688 6.5″ 3.0 458 153 Apple iPhone 11 Pro CSS Media Query
Apple iPhone XR 414 x 896 828 x 1792 6.1″ 2.0 326 163 Apple iPhone 11 Pro CSS Media Query
Apple iPhone X 375 x 812 1125 x 2436 5.8″ 3.0 458 153 Apple iPhone 11 Pro CSS Media Query
Apple iPhone 8 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone 11 Pro CSS Media Query
Apple iPhone 8 Plus 414 x 736 1080 x 1920 5.5″ 3.0 401 134 Apple iPhone 11 Pro CSS Media Query
Apple iPhone 7 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone 11 Pro CSS Media Query
Apple iPhone 7 Plus 414 x 736 1080 x 1920 5.5″ 3.0 401 134 Apple iPhone 11 Pro CSS Media Query
Apple iPhone 6s Plus 414 x 736 1080 x 1920 5.5″ 3.0 401 134 Apple iPhone 11 Pro CSS Media Query
Apple iPhone SE 320 x 568 640 x 1136 4.0″ 2.0 326 163 Apple iPhone 11 Pro CSS Media Query
Apple iPhone 6s 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone 11 Pro CSS Media Query
Apple iPhone 6 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone 11 Pro CSS Media Query
Apple iPhone 5s 320 x 568 640 x 1136 4.0″ 2.0 326 163 Apple iPhone 11 Pro CSS Media Query
Apple iPhone 5c 320 x 568 640 x 1136 4.0″ 2.0 326 163 Apple iPhone 11 Pro CSS Media Query
Apple iPhone 5 320 x 568 640 x 1136 4.0″ 2.0 326 163 Apple iPhone 11 Pro 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.