网页适配iPhoneX就这么简单

iPhoneX取消了实体按键，改成了底部的小黑条。这个改动导致了网页上尴尬的屏幕适配问题。对于网页来说，浏览器已经处理好了顶部（刘海部分）的适配问题，所以我们只需要关注底部和小黑条之间的适配问题（即常见的吸底导航，返回顶部，等等。相对于固定定位元素的底部）。笔者通过查阅一些官方文档，结合实际项目中的一些处理经验，整理出一套简单的适配方案分享给大家，希望对大家有所帮助。以下是处理前后效果图：适配前需要了解的几个新知识安全区域安全区域指的是一个可见的窗口范围，安全区域中的内容不受圆角（corners）、齐刘海（sensorhousing），小黑条（HomeIndicator），如下图蓝色图Colorarea：也就是说，我们要想做好适配，就要保证页面可见，可操作区域在安全区。更详细的可以参考文档：HumanInterfaceGuidelines-iPhoneXviewport-fitiOS11newfeature，为了适配iPhoneX对苹果已有的viewportmeta标签的扩展，用于设置可见窗口中网页的布局，可以设置三个值：contain：可见窗口完全包含网页内容（左图）cover：网页内容完全覆盖可见窗口（右图）auto：默认值，与contain一致注意：不加扩展的网页默认表现是viewport-fit=contain，需要适配iPhoneX必须设置viewport-fit=cover，这是适配的关键步骤。具体可以参考文档：viewport-fit-descriptorconstant函数是iOS11的新特性，Webkit的一个CSS函数，用于设置安全区域到边界的距离。有四个预定义变量：safe-area-inset-left：安全区域到左边界的距离safe-area-inset-right：安全区域到右边界的距离safe-area-inset-bottomsafe-area-inset-bottom安全区域到上边界的距离：这里我们只需要注意变量safe-area-inset-bottom，因为它对应的是高度小黑条（横竖屏数值不同）。注意：常量函数在viewport-fit=contain时不起作用，必须与viewport-fit=cover一起使用。对于不支持常量的浏览器，浏览器会忽略它。官方文档中提到env函数即将取代constant函数，不过笔者测试过，暂时还没有。更详细的可以参考文档：HowtoadaptDesigningWebsitesforiPhoneX了解了以上知识点后，我们的适配思路就很清晰了。第一步：设置网页在可见窗口的布局添加viweport-fit属性，让页面内容完全覆盖整个窗口：如前所述，只有在设置了viewport-fit=cover的情况下才能使用常量函数。第二步：页面主要内容限制在安全区域。该步骤根据实际页面场景选择。如果不设置这个值，可能会有小黑条覆盖整个页面内容。body{padding-bottom:constant(safe-area-inset-bottom);}第三步：fixed元素的适配类型1：fixed完全吸收bottom元素（bottom=0），比如下面两种情况：是extendthe通过添加填充高度：{padding-bottom:constant(safe-area-inset-bottom);}或通过计算函数calc覆盖原始高度：{height:calc(60px(assumedvalue)+constant(safe-area-inset-bottom));}注意这个方案要求吸底条必须有底色，因为延伸部分的底色是跟外容器的，否则会出现空心的情况。另一种方案是添加一个新的元素（空色块，主要用于小黑条的高度），然后吸底元素只能调整位置，不改变高度，像这样：{margin-bottom:constant(safe-area-inset-bottom);}空色块：{position:fixed;bottom:0;width:100%;height:constant(safe-area-inset-bottom);background-color:#fff;}类型2：固定不完全吸底的元素（底≠0），比如“返回顶部”，“侧边广告”等，只有这种位置需要向上调整，可以只处理bymargin:{margin-bottom:constant(safe-area-inset-bottom);}或者，也可以使用计算函数calc覆盖原来的bottom值：{bottom:calc(50px(assumedvalue)+constant(safe-area-inset-bottom));}这里不要忘记用@supports来写，常见的两种固定元素适配方案我们已经了解了，但是不要忘了，一般只需要加上iPhoneX的适配样式，我们可以这样用@supports来写样式：@supports(bottom:constant(safe-area-inset-bottom)){div{margin-bottom:constant(safe-area-inset-bottom);}}