为iphoneX设计网站适配几乎所有的前端开发人员都会接触到为iphoneX设计H5网页，在设计过程中，他们必须针对自己独特的安全区域进行适配，以优化用户体验。安全区域布局指南定义了实际上不会出现在屏幕上但有助于定位、对齐和内容间距的矩形区域。这个区域就是安全区域，安全区域还可以防止状态栏、导航栏、工具栏、标签栏下方的内容重叠，如下图蓝色区域所示：Safari原生网页Safari已经很好了适配新iPhoneX如果设置了安全区域，你的H5网页在Safari打开时会在安全区域打开。如果你想在Safari以外的浏览器中打开你的H5网页，你就得重新考虑安全区域的适配了。如何设计viweport-fit：coverviewportfit默认值为auto，会造成自动inset行为。要禁用此行为并使页面布局适合屏幕的最大尺寸，可以将视口适合设置为覆盖以限制到安全area在settingsviewportfit之后，需要将内容限制在safearea之内。ios11Webkit提出env()函数，用于设置安全区域与边框的距离，包含四个预定义变量：safe-area-inset-left：安全区域与左边框的距离safe-area-inset-right：安全区域到右边界的距离safe-area-inset-top：安全区域到上边界的距离safe-area-inset-bottom：安全区域到右边界的距离bottomborder注意：当viewport-fit=contain时env()不起作用，必须与viewport-fit=cover一起使用。对于不支持env()的浏览器，浏览器会忽略它。特别要注意的是，很多朋友可能会想到使用constant()函数。官方文档中指出：因此iOS11.2之后不能再使用constant()了。这方面需要做兼容性：.post{padding:12px;padding-bottom:constant(safe-area-inset-bottom);/*兼容iOS<11.2*/padding-bottom:env(safe-area-inset-bottom);/*兼容iOS>=11.2*/}min()、max()、calc()在实际开发中并不是那么简单。设备横竖屏的状态会导致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(defaultvalue)+env(safe-area-inset-bottom));}@supports如果你只是希望这个适配只针对iphoneX设备，那么可以使用@supports隔离适应风格。@supports(bottom:constant(safe-area-inset-bottom))或(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-苹果手机-x/
