前端iPhone X适配总结

时间 2019-11-06

标签前端 iphone 适配总结栏目 iPhone 繁體版

原文原文链接

屏幕尺寸

垂直方向上，iPhone X的显示宽度与iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸同样，可是比4.7英寸的显示屏高145pt。html

安全区域

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

viewport-fit

经过对meta标签viewport的扩展，能够调整页面的展示区域。viewport-fit有三个可选值：web

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已经被弃用，因此须要咱们向后兼容：app

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，由于它是相对于屏幕最底部定位的。iphone

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

或者经过计算函数 calc 覆盖原来高度：ide

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

注意，这个方案须要吸底条必须是有背景色的，由于扩展的部分背景是跟随外容器的，不然出现镂空状况。
若是元素是fixed定位且bottom不等于0，则只调整位置就能够了，增长margin-bottom或者改变bottom。函数