[聚合文章] iphoneX适配

Viewport

手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中，通常这个虚拟的“窗口”(viewport)比屏幕宽，这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页布局)，用户可以通过平移和缩放来看网页的不同部分。移动版Safari浏览器最新引进了viewport这个meta标签，让网页开发者来控制viewport的大小和缩放，其他手机浏览器也基本支持。

ios11中viewport-fit三个取值：

• contain：视口完全包含网页内容。头部位置固定元素将被包含在ios11的安全区域内。
• cover：网页内容应完全覆盖视口。头部位置固定元素将被固定到视口，这恢复了ios10上的行为。
• auto：默认值，行为相同contain。

如：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

CSS常量

对于iphoneX头部遮挡问题，苹果公司增加了一种方法来将安全区域布局指南暴露给CSS。他们添加了一个类似于CSS变量的概念，称为CSS常量。这些像系统设置的CSS变量，不能被覆盖，可以通过CSS中的constant()函数来访问，该函数已被提交给CSS工作组进行标准化。

4个布局常数：

• constant(safe-area-inset-top)：从视口顶部的安全区域插入量(以CSS像素为单位)。
• constant(safe-area-inset-bottom)：从视口底部的安全区域插入量(以CSS像素为单位)。
• constant(safe-area-inset-left)：从视口左侧的安全区域插入量(以CSS像素为单位)。
• constant(safe-area-inset-right)：从视口右侧的安全区域插入量(以CSS像素为单位)。

如：

.header{
    padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
}