Menu
What are the CSS media queries corresponding to Apple's new devices ? I need to set the body's background-color to change the X's safe area background color.
880
Media query is a CSS technique introduced in CSS3. It is a cool way to target different screen sizes, orientations, and devices.
Media queries are used for the following: To conditionally apply styles with the CSS @media and @import at-rules. To target specific media for the <style> , <link> , <source> , and other HTML elements with the media= attribute.
The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { } @media only screen and (device-width : 375px) and (device-height : 667px) and (-webkit-device-pixel-ratio : 2) { } @media only screen and (device-width : 414px) and (device-height : 736px) and (-webkit-device-pixel-ratio : 3) { }
iPhone 6+/6s+/7+/8+ share the same sizes, while the iPhone 7/8 also do.
Looking for a specific orientation ?
Portrait
Add the following rule:
and (orientation : portrait) Landscape
Add the following rule:
and (orientation : landscape) References:
78
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