39

What are the correct CSS media queries used to target Apple's 2018 devices: iPhone XR/XS/XS Max ?

0

3 Answers 3

68

iPhone XR

/* 1792x828px at 326ppi */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2) { }

iPhone XS

/* 2436x1125px at 458ppi */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

iPhone XS Max

/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3) { }



Looking for a specific orientation ?

Portrait

Add the following rule:

    and (orientation : portrait) 

Landscape

Add the following rule:

    and (orientation : landscape) 



References:

4
  • other andorid devices are also getting affected by above styes Jun 8, 2020 at 15:37
  • Many years ago I created a snippet I shared on Gist/Github† on how to target these devices using this technique with SCSS. I am now learning this device-width technique is deprecated. What are y'all using now instead? † gist.github.com/frankstallone/cee114d0b6935717696e6506552bc75a Apr 7, 2021 at 14:10
  • 2
    I wish all SO answers were this straight forward, thanks! Jul 20, 2021 at 14:50
  • I dunno about the current latest browsers but when media queries started (max/min)-device-width meant the actual resolution of the device and (max/min)-width means CSS pixels. So if the screen resolution width is 720px and the screens pixel density is 2 then CSS pixels is 360 (half). device-width is also now deprecrated developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width
    – OZZIE
    Oct 12, 2021 at 8:27
4

The above is correct, but designers need to target the true screen dimensions to avoid scaling, cropping etc. For example the default landscape screen size is actually 808px for an XR.

So this may be more appropriate: @media (max-width: 808px) {...

This will in fact override this query: @media (max-width: 896px) {...

The problem is Apples safe area insets. These can be overcome and get true 896px edge to edge width by adding the following;

Meta tag: viewport-fit=cover

CSS: body { padding: env(safe-area-inset, 0px); }

The 0px size padding can be changed, or left right top bottom variables added, or adapt for portrait/landscape. But most will already have sufficient padding in their design.

Reference: https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Not tested on other devices but seems they are all adopting same.

0

The info from Nathan is great. Thanks for the breakpoints which every browser's inspector doesn't seem to have. Only challenge I ran into was that all of my previous media queries use things like

/* Landscape */
@media only screen 
    and (min-device-width : 414px) 
    and (max-device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) { 

whereas the solution above uses only

and (device-width : 414px)

which can cause issues with queries you may already have that use both min-device and max-device.

Thanks very much for these sizes and DPRs!

2
  • The answer provided by @DickKirkland is correct, since you must add the min and max to device-width and device-height
    – Paula
    Aug 14, 2020 at 17:47
  • I dunno about the current latest browsers but when media queries started (max/min)-device-width meant the actual resolution of the device and (max/min)-width means CSS pixels. So if the screen resolution width is 720px and the screens pixel density is 2 then CSS pixels is 360 (half). Its much easier to work with max/min-width than consider all pixel densities., device-width is also now deprecrated developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width
    – OZZIE
    Oct 12, 2021 at 8:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.