好好的运行了一年多的H5网页，今天突然QA同学拿着个iphoneX过来，说得适配一波。
一看是iphoneX的齐刘海挡住了UI顶部的一个经验条。那就改一波吧。公司项目不方便放图。
想了好久，不想大改UI，只想将被齐刘海遮住的经验条下移。想到了使用css伪元素。伪元素作为一个装饰在html头部插入一个空白间距。方法如下：
新建一个css文件：iphoneX.css
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
/*增加头部适配层*/
.html-topbar {
height: 100%;
box-sizing: border-box;
padding-top: 44px;
&:before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 44px;
background-color: #000000;
z-index: 9998;
}
}
}
注释&:before是一种简写方式，等价为.html-topbar:before,另外伪元素的content不可省略(哪怕内容为空)，否则伪元素不执行。
在原html中加入css,并未html标签设置类名
<html class="html-topbar">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" type="text/css" href="iphoneX.css">
加入后有效，以后针对特定手机屏幕适配也可以使用@media only screen and (device-width: 375px) and (device-height: 812px)这种方式。
扩展阅读：大放异彩的伪元素
