苹果刘海屏适配,iphone设置刘海屏

　　Iphonex的刘海屏并不美观，但确实给开发造成了一些困扰。有些pm希望产品全屏显示，所以客户端把刘海上面的空间让出来给前端处理，造成了一个问题，就是当页首固定在顶部的时候，如果你上下滑动页面，会有很大的空隙。如果背景全是白色，那就没问题，否则就像断层一样，很难看。

　　Iphone屏幕尺寸

　　iphoneX和其他型号的尺寸差异

　　产生上述问题的原因是iphoneX中存在一个安全区域，安全区域指的是一个可见的窗口范围。安全区域中的内容不受角落、传感器外壳和原位指示器的影响，如下图蓝色区域所示：

　　也就是说，要想适配好，就要保证页面的可视可操作区域在安全区域。

　　详情请参见人机界面指南iphonex。

　　如何适配？

　　第一步是在可视窗口中设置网页的布局。meta name=" viewport " content=" width=device-width，viewport-fit=cover " IOs 11的新特性，为了适应iPhoneX对现有viewport meta标签的扩展，苹果可以设置三个值：

　　包含：可见窗口完全包含web内容(左图)覆盖：web内容完全覆盖可见窗口(右图)自动：默认值，与包含的性能一致。

　　注意：默认情况下，没有扩展的网页的性能是viewport-fit=contain。如果需要适配iPhoneX，必须设置viewport-fit=cover，这是适配的关键步骤。

　　有关详细信息，请参见视口适配描述符的第二步。页面的主要内容被限制在安全区域。post { padding: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)；}constant 函数

　　IOS11是一个新特性，Webkit的一个CSS功能，用来设置安全区域和边界的距离。有四个预定义变量：

　　safe-area-inset-left:safe-area-inset-right:safe-area-inset-top:safe-area-inset-bottom:有些浏览器不再支持常量功能。默认情况下，如果客户端处理安全区域，请使用env函数。

　　使用全屏viewport-fit=cover属性后：

　　安全区域地图：

　　定义安全区域后的效果图：

　　填充设置为12像素以上，如果旋转方向后：

　　第三步，在supports (padding: max (0px)) {。post {padding-left: max (12px，env(safe-area-inset-left))；右填充：max(12px，env(safe-area-inset-right))；}}

　　固定元素修复问题如果页面标题实现在前端，固定在顶部，会被屏蔽。此时，您可以将顶部值设置为安全距离值，例如：header { top:env(safe-area-inset-top)；top:const(安全区域插入顶部)；}参考文章：为iPhone X设计网站

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。