Menu
What are the correct CSS media queries used to target Apple's 2018 devices: iPhone XR/XS/XS Max ?
341
The iPhone XS and XS Max feature the same dual 12-megapixel cameras, with a wide-angle (ƒ/1.8 aperture) lens and and telephoto (ƒ/2.4) aperture. The iPhone XR has a single 12-megapixel wide-angle (ƒ/1.8 aperture) sensor. Those dual sensors give the iPhone XS and XS Max 2x optical zoom, and up to 10x digital zoom.
CSS declared inline This may be the reason why your media queries aren't working. That is to say, you may have declared CSS within your HTML document. So if this is the case, simply go through the HTML document and remove the CSS declared inline.
Using media queries. Media queries are commonly associated with CSS, but they can be used in HTML and JavaScript as well. There are a few ways we can use media queries directly in HTML.
Depending on how you layout your site you may need to use more or less queries, as you only need a query for each seperate layout/design of the site. A good choice for basic use would be Smartphone, Tablet, Standard Screen, HD Screen or 4.
/* 1792x828px at 326ppi */ @media only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 2) { } /* 2436x1125px at 458ppi */ @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { } /* 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:
163
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With