首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >iPhone X/8/8+ CSS媒体查询

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

Stack Overflow用户
提问于 2017-09-20 13:02:50
回答 2查看 152.3K关注 0票数 80

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

EN

回答 2

Stack Overflow用户

发布于 2017-12-12 12:47:59

以下是针对iPhones的一些媒体查询。这里是参考链接https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

代码语言:javascript
复制
        /* 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) { }
票数 89
EN

Stack Overflow用户

发布于 2018-12-08 06:33:16

似乎使用env()为iPhone X/8添加填充的最准确(和无缝)方法是...

代码语言:javascript
复制
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

这里有一个描述这一点的链接:

https://css-tricks.com/the-notch-and-css/

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46313640

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档