- 在 H5 页面链接一个 iphonex.css 来给 iPhone X 访问的页面增加对应的适配层
- 在 H5 页面上给对应的 dom 结构加上适配的类名
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>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
</body>
</html>
