本篇教程探讨了HTML5 IphoneX适配方法，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

IphoneX的适配，关键在于怎么让页面适应“齐刘海”、底部操作区域以及大圆角问题。IphoneX相对于其他手机，不同之处在于设备虽同样都是一个屏幕，但其实被分为了好几个模块，具体见下图：

我们正常的一个网页，搬到X上来，效果是内容只显示在SafeArea安全区域，非安全区域部分没有网内容，也就是说头部和底部会出现白块，怎么处理？

解决办法

1.给body加一个background-color

为什么要加background-color？有什么用？注意到我们刚说到的头部和底部会出现白块，其实说是白色其实并不准确，因为这个颜色其实来自于body的背景色。另外，我们上拉或下拉内容时会显示网页下方的内容及颜色，其实也是body的背景颜色。所以如果你想修改这两个效果，就可以设置一下body的背景色。

2.添加viewport-fit=cover的标签

这一步极为关键。先看一下结果：

复制代码代码如下:

为什么说极为关键？iphoneX的主要问题就是除了安全区域外，其他地方不能显示网页内容，而它就是为解决这个问题而量身定制的。当设置了以上内容后，头部和底部就能开放给网页显示内容。

但是用了之后你会发现，区域是开放了，但是内容（常为导航栏）却因为“齐刘海”而被遮挡住了部分内容，并且，发现原本设置的100%的高度并没有占用全部高度空间，怎么办？

对于头部的高度和底部的高度，其实是有匹配值的，如下图：

所以，我们有如下方案处理：

1.修改我们导航栏的高度，为原本高度加上safe-area-inset-top的高度，也就是44px；具体可以这么写：

height:calc(navHeight+44px);，并且重新设置一下导航栏上文案的位置。

2.IOS11的浏览器chromium内核提供了以下内容，也就是我们上图标注的那几个值：

safe-area-inset-top

safe-area-inset-right

safe-area-inset-left

safe-area-inset-bottom

怎么用呢？很简单：

body{

padding-top:constant(safe-area-inset-top);//为导航栏+状态栏的高度88px

padding-left:constant(safe-area-inset-left);//如果未竖屏时为0

padding-right:constant(safe-area-inset-right);//如果未竖屏时为0

padding-bottom:constant(safe-area-inset-bottom);//为底下圆弧的高度34px

}

也许你没见过constant这个东西，我以前也没见过，它也是专为iphoneX而设计的值，注意只有当你的标签加上了viewport-fit=cover之后，该值才能生效。当然，在android手机上，是不会被识别的。

3.只为IphoneX生效

注意了，我们做的这个适配是只为IphoneX生效的，并不能影响到其他手机，所以我们要做响应式布局，即，使用媒体查询，如下：

//注意这里采用的是690px(safearea高度)，不是812px;

@mediaonlyscreenand(width:375px)and(height:690px){

body{

height:100vh;

}

}

有资料说上面这么用是ok的，然而我用着却没啥效果，于是我放宽了点条件，做了修改如下：

@mediaonlyscreenand(width:375px)and(min-height:690px){

body{

height:100vh;

}

}

区别在于我是识别宽度为375px，高度大于690px的设备即为IphoneX。当然，目前只有X这款设备符合该条件。

4.网页高度变化

先强调一下，这部分不太确定，我自己遇到了，提出来说明一下：

设置了viewport-fit之后，会发现原本设置的100%的高度不符合预期了，只占用了部分屏幕空间，其实，不急，只需要作如下修改：

@mediaonlyscreenand(width:375px)and(min-height:690px){

body{

height:100vh;

}

}

vh是检查viewport即视口的高度，1vh=1%视口高度，是个绝对单位。设置100vh的意思就是占满全屏高度

5.导航栏吸顶，任务栏吸底

页面内容可以拉动，如果导航栏也随着滑动，效果很丑，这就需要我们实现导航栏吸顶效果。实现大家都会就不多说，这里展示我的一个案例：

@mediaonlyscreenand(width:375px)and(min-height:690px){

div{

position:fixed;

display:block;

z-index:300;

}

.bg{

height:calc(3.5rem+44px);

}

p{

margin-top:44px;

}

}

任务栏同理。

本文由职坐标整理发布，学习更多的HTML5/CSS3相关知识，请关注职坐标WEB前端HTML5/CSS3频道！