关于前端:iphoneX设计网站适配

简直所有的前端开发者都会接触到为 iphoneX 设计 H5 网页，其中就得为其特有的平安区域做出适配，以便优化用户体验。

布局参考线定义了矩形区域，这些区域实际上不会呈现在屏幕上，但有助于内容的定位、对齐和间距。这块区域就是平安区域，平安区域还能够避免内容在状态栏、导航栏、工具栏和选项卡栏的下方重叠，如下图蓝色区域：

Safari 在新款 iPhone X 曾经很好地适配了平安区域，你的 H5 网页在 Safari 关上是会在平安区域内的。如果你想要在 Safari 之外的浏览器关上你的 H5 网页，就得重新考虑一下平安区域的适配了。

viewport fit 的默认值是 auto，这将导致主动插入行为。为了禁用该行为并使页面布局为屏幕的最大尺寸，能够将 viewport fit 设置为 cover

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

在设置了 viewport fit 之后，就须要将内容限定在平安区域之内。ios 11 Webkit 提出了 env() 函数，用于设定平安区域与边界的间隔，包含四个预约义的变量：

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

留神：当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 应用。对于不反对 env() 的浏览器，浏览器将会疏忽它。

尤其留神很多小伙伴可能会想过应用 constant() 函数，在官网文档中指出：

因而 constant() 在 iOS11.2 之后就不能再应用了，这方面还须要做一下兼容：

.post {
    padding: 12px;
    padding-bottom: constant(safe-area-inset-bottom);  /* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

理论开发中，可没这么简略。设施横屏竖屏的状态都会导致 safe-area-inset-bottom 的对象不统一，这时候设置的值就会有问题。你就能够思考应用数学计算了。。。

.post {padding-bottom: max(12px, env(safe-area-inset-bottom));
}

在下面例子中：当设施竖屏是，领有 safe-area-inset-bottom，这时候基本上会大于 12px，因而取值 safe-area-inset-bottom；当横屏时，safe-area-inset-bottom 为 0，这时候会取默认 12px，以致于横屏时页面底部不会太贴边。

你也能够应用 calc() 计算，不论 safe-area-inset-bottom 有没有，都设置 12px 的默认值。如下：

.post {padding-bottom:  calc(12px( 默认值) + env(safe-area-inset-bottom));
}

如果你只是心愿这种适配只针对 iphoneX 设施，那么你能够应用 @supports 来对适配款式进行隔离。

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.post {padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}

以上几种计划仅供参考，有趣味对 iphone 设施兼容的能够移步官网文档（底部参考链接）进行钻研。

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

https://webkit.org/blog/7929/designing-websites-for-iphone-x/

关于前端:iphoneX设计网站适配

为 iphoneX 设计网站适配

平安区域

Safari 原生网页

如何设计

viweport-fit:cover

限度到平安区域

min()、max()、calc()

@supports

写在最初

参考