CTO练习营 | 12月3-5日，深圳，是时刻成为优良的技巧治理者了

iPhoneX 撤消了物理按键，改成底部小黑条，这一修改导致网页出现了比较难堪的屏幕适配问题。对于网页而言，顶部(刘海部位)的适配问题浏览器已经做了处理，所以我们只须要存眷底部与小黑条的适配问题即可(即常见的吸底导航、返回顶部等各类相对调部 fixed 定位的元素)。

笔者经由过程查阅了一些官方文档，以及结合实际项目中的一些处理经验，整顿了一套简单的适配筹划分享给大年夜家，欲望对大年夜家有所赞助，以下是处理前后效不雅图：

适配之前须要懂得的几个新常识

安然区域

也就是说，我们要做好适配，必须包管页面可视、可操作区域是在安然区域内。

更具体解释，参考文档： Human Interface Guidelines - iPhoneX

viewport-fit

类型二：fixed 非完全吸底元素(bottom ≠ 0)，比如 “返回顶部”、“侧边告白” 等

iOS11 新增特点，苹不雅公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩大，用于设置网页在可视窗口的构造方法，可设置三个值：

• contain: 可视窗口完全包含网页内容(左图)
• cover：网页内容完全覆盖可视窗口(右图)
• auto：默认值，跟 contain 表示一致

留意：网页默认不添加扩大的表示是 viewport-fit=contain，须要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步调。

更具体解释，参考文档： viewport-fit-descriptor

constant 函数

iOS11 新增特点，Webkit 的一个 CSS 函数，用于设定安然区域与界线的距离，有四个预定义的变量：

• safe-area-inset-left：安然区域距荡子边界线距离
• safe-area-inset-right：安然区域距离右边界线距离
• safe-area-inset-top：安然区域距离顶部界线距离
• safe-area-inset-bottom：安然区域距离底部界线距离

这里我们只须要存眷 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度(反正屏时价不一样)。

留意：当 viewport-fit=contain 时 constant 函数是不起感化的，必须要合营 viewport-fit=cover 应用。对于不支撑 constant 的浏览器，浏览器将会忽视它。

官方文档中提到 env 函数即将要调换 constant 函数，笔者测试过临时还弗采取。

更具体解释，参考文档： Designing Websites for iPhone X

若何适配

懂得了以上所说的几个常识点，接下来我们适配的思路就很清楚了。

第一步：设置网页在可视窗口的构造方法

新增 viweport-fit 属性，使得页面内容完全覆盖全部窗口：

安然区域指的是一个可视窗口范围，处于安然区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响，如下图蓝色区域：

<metaname="viewport"content="width=device-width, viewport-fit=cover"> 

第二步：页面主体内容限制在安然区域内

这一步根据实际页面场景选择，如不雅不设置这个值，可能存在小黑条遮挡页面最底部内容的情况。

body { 
  padding-bottom: constant(safe-area-inset-bottom); 
} 

第三步：fixed 元素的适配

类型一：fixed 完全吸底元素(bottom = 0)，比如下钤记两种情况：

可以经由过程加内边距 padding 扩大高度：

{  
padding-bottom: constant(safe-area-inset-bottom);  
} 

或者经由过程计算函数 calc 覆盖本来高度：

{ 
  height: calc(60px(假设值) + constant(safe-area-inset-bottom)); 
} 

留意，这个筹划须要吸底条必须是有配风景的，因为扩大的部分派景是跟随外容器的，不然出现镂空情况。

还有一种方檀卷是，可以经由过程新增一个新的元素(空的色彩块，重要用于小黑条高度的┞芳位)，然后吸底元素可以不改变高度只须要调剂地位，像如许：

{ 
	
			
 1/2    1 2 下一页 尾页
	
			

　　推荐阅读
　　从Zero到Hero ，一文掌握Python
            CTO练习营 | 12月3-5日，深圳，是时刻成为优良的技巧治理者了
            第一个问题，什么是 Python ?根据 Python 之父 Guido van Rossum 的话，Python 是：一种高等法度榜样说话，其核心设计哲学是代>>>详细阅读


本文标题：网页适配iPhoneX，就是这么简单
地址：http://www.17bianji.com/lsqh/39243.html
 1/2    1