好好的運(yùn)行了一年多的H5網(wǎng)頁，今天突然QA同學(xué)拿著個iphoneX過來，說得適配一波。
一看是iphoneX的齊劉海擋住了UI頂部的一個經(jīng)驗條。那就改一波吧。公司項目不方便放圖。
想了好久，不想大改UI，只想將被齊劉海遮住的經(jīng)驗條下移。想到了使用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不可省略(哪怕內(nèi)容為空)，否則偽元素不執(zhí)行。
在原h(huán)tml中加入css,并未html標(biāo)簽設(shè)置類名
<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">
加入后有效，以后針對特定手機(jī)屏幕適配也可以使用@media only screen and (device-width: 375px) and (device-height: 812px)這種方式。
擴(kuò)展閱讀：大放異彩的偽元素
