iphonex的刘海，先不说好看不好看，但确实给开发带来了一些麻烦。有的PM希望产品可以全屏显示，所以客户端让出刘海以上的空间给前端处理，造成的问题是当页眉固定在顶部时，如果向上滑动页面再往下，就会有很大的落差。背景如果全白就好了，不然就显得断层了，很难看。iphoneX和其他机型的iphone屏幕尺寸差异造成以上问题的原因是iphoneX中存在安全区域。安全区域是指可见窗口的范围。安全区的内容不受圆角、缺口（传感器外壳）和小黑条（HomeIndicator）的影响，如下图蓝色区域所示：也就是说，如果我们想做好适配工作，一定要保证页面可见，可操作区域在安全区域内。具体尺寸参见人机界面指南——iPhoneX如何适配？第一步是在可见窗口中设置网页的布局iPhoneXviewportmeta标签的扩展，用于设置网页在可见窗口中的布局。可以设置三个值：contain：可见窗口完全包含网页内容（左图）cover：网页内容完全覆盖可见窗口（右图）auto：默认值，与contain一致注：默认表现不加扩展的网页是viewport-fit=contain，需要适配iPhoneX。必须设置viewport-fit=cover，这是适配的关键步骤。详见：Theviewport-fitdescriptor的第二步，将页面主要内容限制在安全区域。发布{填充：12px；padding-left:env(safe-area-inset-left);padding-left:const(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-right:const(safe-area-inset-right);}constantfunctioniOS11新特性，Webkit的一个CSS函数，用于设置安全区域到边框的距离。有四个预定义变量：safe-area-inset-left：安全区域与左边界的距离safe-area-inset-right：安全区域与右边界的距离safe-area-inset-top：safe-area-inset-bottomsafe-area-inset-bottom:safe-area-inset-bottom:safe-area-inset-bottom:safe-area-inset-bottom设置安全区域后效果如下：使用全屏后viewport-fit=coverproperty:safeareamap:限制安全区域后的效果图：上面设置padding为12像素，如果旋转方向：第3步，使用min()和max()方法@supports(padding:max(0px)){.post{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));}}fixedelementfixedproblem如果页面title由前端实现，固定在顶部，会被屏蔽。这时候可以将top值设置为安全距离值，如：。header{top:env(safe-area-inset-top);top:const(safe-area-inset-top);}参考文章：为iPhoneX设计网站
