H5 iphoneX适配方案,原理是找到iPhone X屏幕高度，用媒体查询控制html加上头部，底部的区间，避开异性区域。
less
@media only screen and (device- 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { /*增加头部适配层*/ .has-topbar { height: 100%; box-sizing: border-box; padding-top: 32px; &:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 32px; background-color: #000000; z-index: 9998; } } /*增加底部适配层*/ .has-bottombar { height: 100%; box-sizing: border-box; padding-bottom: 34px; &:after { content: ''; z-index: 9998; position: fixed; left: 0; bottom: 0; width: 100%; height: 34px; background: #f7f7f8; } } /*导航操作栏上移*/ .bottom-menu-fixed { bottom: 34px; } }
html
<!DOCTYPE HTML> <html class="has-topbar has-bottombar"> <head> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no" /> <meta http-equiv="x-dns-prefetch-control" content="on"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /> <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="../../css/index.v6/index.css"> <link rel="stylesheet" href="../../css/index.v6/iphonex.css"> <title>游戏中心</title> </head> <body class="body-index " ontouchstart=""> <ul class="ui-tiled bottom-menu bottom-menu-fixed" > <li class=""> <i class="gc-icon-normal gc-icon-find" ></i> <div class="txt">游戏</div> </li> <li class=""> <i class="gc-icon-normal gc-icon-live" ></i> <div class="txt">直播</div> </li> <li class=""> <i class="gc-icon-normal gc-icon-compete" ></i> <div class="txt">赛事</div> </li> <li class=""> <i class="gc-icon-normal gc-icon-original" ></i> <div class="txt">电竞圈</div> </li> <li class="marker"></li> </ul> </body> </html>
参考链接：http://web.jobbole.com/92991/