Mobile Viewports

These are the viewport's widths and DPRs available when using the viewport meta tag width=device-width on different deivces.

iPhone #

Viewport width (in CSS pixels):

• 320: iPhone SE 1
• 375: iPhone 7/8/X/Xⓢ/11 Pro/SE 2/12 mini/13 mini/SE 3
• 390: iPhone 12/12 Pro/13/13 Pro/14
• 393: iPhone 14 Pro
• 414: iPhone 7+/8+/Xⓢ Max/XⓇ/11/11 Pro Max
• 428: iPhone 12 Pro Max/13 Pro Max/14 Plus
• 430: iPhone 14 Pro Max

Device Pixel Ratio (resolution, in dppx):

• 2: iPhone SE/7/8/XⓇ/11/SE 2/SE 3
• 3 (emulated): iPhone 7+/8+/12 mini/13 mini
• 3 (real): iPhone X/Xⓢ/Xⓢ Max/11 Pro/11 Pro Max/12/12 Pro/12 Pro Max/13/13 Plus/13 Pro/13 Pro Max

Apple Watch Browser #

Viewport width (in CSS pixels):

• 320: All Apple watch without disabled-adaptations meta tag present
• 136: Apple Watch Series 1 to 3 38mm with disabled-adaptations
• 156: Apple Watch Series 1 to 3 42mm with disabled-adaptations
• 162: Apple Watch Series 4, 5 and SE 40mm with disabled-adaptations
• 184: Apple Watch Series 4, 5 and SE 44mm with disabled-adaptations

Device Pixel Ratio (resolution, in dppx):

• 2 (emulated): All Apple Watches

iPad #

Viewport width (in CSS pixels):

• 320: iPad/iPad Air/iPad Mini in Split View 1/3 or Side View
• 375: iPad Pro in Split View 1/3 or Side View
• 438: iPad/iPad Air/iPad Mini in Split View 2/3 (Portrait-only)
• 507: iPad/iPad Air/iPad Mini in Split View 1/2
• 678: iPad Pro Split View 1/2
• 639: iPad Pro Split View 2/3 (Portrait-only)
• 694: iPad/iPad Air/iPad Mini in Split View 2/3 (Landscape-only)
• 768: iPad/iPad Air/iPad Mini
• 980: iPad/iPad Air/iPad Mini with no viewport meta tag is present
• 981: iPad Pro Split View 2/3 (Landscape-only)
• 1024: iPad Pro

The attribute shink-to-fit in the viewport meta tag can change how iPad renders the viewport while in Side or Split views. Read more

Device Pixel Ratio (resolution, in dppx):

• 2: All iPads

If you liked this note, subscribe to my newsletter (no spam).