- 在 H5 頁(yè)面鏈接一個(gè) iphonex.css 來(lái)給 iPhone X 訪問(wèn)的頁(yè)面增加對(duì)應(yīng)的適配層
- 在 H5 頁(yè)面上給對(duì)應(yīng)的 dom 結(jié)構(gòu)加上適配的類名
iphonex.css
@media only screen and (device-width: 750px) and (device-height: 812px) and (-webkit-device-pixel-radio: 3) {
/* 增加頭部是配層 */
.has-topbar {
height: 100%;
box-sizing: border-box;
padding-top: 44px;
&:before {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 44px;
background-color: #000000;
z-index: 9998;
content: '';
}
}
// 增加底部適配層
.has-bottombar {
height: 100%;
box-sizing: border-box;
padding-bottom: 34px;
&:after {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 34px;
background: #f7f7f8;
content: '';
z-index: 9998;
}
}
.bottom-menu-fixed {
bottom: 34px;
}
}
HTML
<!DOCTYPE html>
<html lang="en" class="has-topbar has-bottombar">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=700,target-densityDpi=device-dpi,user-scalable=no">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="./css/index.css">
<link rel="stylesheet" type="text/css" href="./css/iphonex.css">
</head>
<body>
<ul class="bottom-menu-fixed">
<li>導(dǎo)航1</li>
<li>導(dǎo)航2</li>
<li>導(dǎo)航3</li>
<li>導(dǎo)航4</li>
</ul>
</body>
</html>
