前端iPhone X适配总结

2019年8月24日 211次阅读 来源: songxianling1992

屏幕尺寸

垂直方向上，iPhone X的显现宽度与iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一样，然则比4.7英寸的显现屏高145pt。

平安地区

平安地区指的是一个可视窗口局限，处于平安地区的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响

viewport-fit

经由过程对meta标签viewport的扩大，能够调解页面的展现地区。viewport-fit有三个可选值：

contain:使页面展现在平安地区内。
cover： 使页面占满屏幕。
auto： 和 contain 选项表现一样

iOS11 新增特征，Webkit 的一个 CSS 函数，用于设定平安地区与边境的间隔，有四个预定义的变量：

safe-area-inset-left：平安地区间隔左侧边境间隔
safe-area-inset-right：平安地区间隔右侧边境间隔
safe-area-inset-top：平安地区间隔顶部边境间隔
safe-area-inset-bottom：平安地区间隔底部边境间隔

env() 和 constant()

由于之前运用的constant已被弃用，所以须要我们向后兼容：

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

适配

1.设置网页在可视窗口的规划体式格局使页面完整掩盖全部窗口

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
 只要设置了 viewport-fit=cover，才运用 env()。

2. 页面主体内容限定在平安地区内

body {
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }

3. fixed 元素的适配

假如元素是fixed定位且bottom=0，那末除了设置body的padding-bottom还不够，还须要给它本身增添padding，由于它是相对于屏幕最底部定位的。


{
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }

或许经由过程盘算函数 calc 掩盖本来高度：

{
        height: calc(60px(假定值) + constant(safe-area-inset-bottom));
        height: calc(60px(假定值) + env(safe-area-inset-bottom));
   }

注重，这个计划须要吸底条必需是有背景色的，由于扩大的部份背景是追随外容器的，不然涌现镂空状况。
假如元素是fixed定位且bottom不等于0，则只调解位置就能够了，增添margin-bottom或许转变bottom。

参考

    原文作者：songxianling1992
    原文地址: https://segmentfault.com/a/1190000013830928
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞