blocks|key|4345958|text|以下是针对iPhones的一些媒体查询。这里是参考链接https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4345959|++++++++/*+iphone+3+*/
++++++++@media+only+screen+and+(min-device-width:+320px)+and+(max-device-height:+480px)+and+(-webkit-device-pixel-ratio:+1)+{+}
++++++++
++++++++/*+iphone+4+*/
++++++++@media+only+screen+and+(min-device-width:+320px)+and+(max-device-height:+480px)+and+(-webkit-device-pixel-ratio:+2)+{+}
++++++++
++++++++/*+iphone+5+*/
++++++++@media+only+screen+and+(min-device-width:+320px)+and+(max-device-height:+568px)+and+(-webkit-device-pixel-ratio:+2)+{+}
++++++++
++++++++/*+iphone+6,+6s,+7,+8+*/
++++++++@media+only+screen+and+(min-device-width:+375px)+and+(max-device-height:+667px)+and+(-webkit-device-pixel-ratio:+2)+{+}
++++++++++++
++++++++/*+iphone+6%2B,+6s%2B,+7%2B,+8%2B+*/
++++++++@media+only+screen+and+(min-device-width:+414px)+and+(max-device-height:+736px)+and+(-webkit-device-pixel-ratio:+3)+{+}
++++++++
++++++++/*+iphone+X+,+XS,+11+Pro,+12+Mini+*/
++++++++@media+only+screen+and+(min-device-width:+375px)+and+(max-device-height:+812px)+and+(-webkit-device-pixel-ratio:+3)+{+}

++++++++/*+iphone+12,+12+Pro+*/
++++++++@media+only+screen+and+(min-device-width:+390px)+and+(max-device-height:+844px)+and+(-webkit-device-pixel-ratio:+3)+{+}
+++++++
++++++++/*+iphone+XR,+11+*/
++++++++@media+only+screen+and+(min-device-width+:+414px)+and+(max-device-height+:+896px)+and+(-webkit-device-pixel-ratio+:+2)+{+}
++++++++++++
++++++++/*+iphone+XS+Max,+11+Pro+Max+*/
++++++++@media+only+screen+and+(min-device-width+:+414px)+and+(max-device-height+:+896px)+and+(-webkit-device-pixel-ratio+:+3)+{+}

++++++++/*+iphone+12+Pro+Max+*/
++++++++@media+only+screen+and+(min-device-width+:+428px)+and+(max-device-height+:+926px)+and+(-webkit-device-pixel-ratio+:+3)+{+}|code-block|syntax|javascript|4345960|entityMap|0|LINK|mutability|MUTABLE|url|https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions^0|R|1Y|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Here are some of the following media queries for iPhones. Here is the ref link <a href="https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions" rel="noreferrer">https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions</a>
<pre><code> /* iphone 3 */
 @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }
 
 /* iphone 4 */
 @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }
 
 /* iphone 5 */
 @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }
 
 /* iphone 6, 6s, 7, 8 */
 @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }
 
 /* iphone 6+, 6s+, 7+, 8+ */
 @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }
 
 /* iphone X , XS, 11 Pro, 12 Mini */
 @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

 /* iphone 12, 12 Pro */
 @media only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3) { }
 
 /* iphone XR, 11 */
 @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) { }
 
 /* iphone XS Max, 11 Pro Max */
 @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) { }

 /* iphone 12 Pro Max */
 @media only screen and (min-device-width : 428px) and (max-device-height : 926px) and (-webkit-device-pixel-ratio : 3) { }

</code></pre>

blocks|key|4346027|text|似乎使用env()为iPhone+X/8添加填充的最准确(和无缝)方法是...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4346028|padding:+env(safe-area-inset-top)+env(safe-area-inset-right)+env(safe-area-inset-bottom)+env(safe-area-inset-left);|code-block|syntax|javascript|4346029|这里有一个描述这一点的链接：|4346030|https://css-tricks.com/the-notch-and-css/|offset|length|4346031|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|15|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

It seems that the most accurate (and seamless) method of adding the padding for iPhone X/8 using env()...

<pre class="lang-css prettyprint-override"><code>padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
</code></pre>

Here's a link describing this:

<a href="https://css-tricks.com/the-notch-and-css/" rel="nofollow noreferrer">https://css-tricks.com/the-notch-and-css/</a>

What are the CSS media queries corresponding to Apple's new devices ? I need to set the <code>body</code>'s <code>background-color</code> to change the X's safe area background color.

iPhone X / 8 / 8 Plus CSS media queries

与苹果的新设备相对应的CSS媒体查询是什么？我需要设置body的background-color来改变X的安全区域背景颜色。

问iPhone X/8/8+ CSS媒体查询
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iPhone X/8/8+ CSS媒体查询EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iPhone X/8/8+ CSS媒体查询
EN