iphoneX设计网站适配

为iphoneX设计网站适配

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

安全区域

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

Safari 原生网页

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

如何设计

viweport-fit:cover

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

<meta name='viewport' content='initial-scale=1, viewpo