苹果X 顶部和底部留白问题

最新推荐文章于 2022-08-15 10:39:24 发布

_Pierre

最新推荐文章于 2022-08-15 10:39:24 发布

阅读量1.1k

点赞数

原文链接：https://www.cnblogs.com/WQLong/p/7778368.html

版权

在处理IphoneX 上下兼容的时候，如果用margin值来顶开会导致上下留白的情况下。所以可以添加viewport-fit=cover" meta标签来使页面整个铺平。例子：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

用媒体查询来响应IphomeX的适配：

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
           /*添加底部适配*/
        body{padding-bottom: 1.7rem;}
         /*增加头部适配层*/
        body {height: 100%;box-sizing: border-box;padding-top: 44px;}
        body:before {content: '';position: fixed;top: 0;left: 0;width: 100%;height: 44px;background-color: #000000;z-index: 9998;}
    }

又或者用getSystemInfo 来获取手机信息，如果为X在进行处理