H5 iphoneX适配方案
H5 iphoneX适配方案,原理是找到iPhone X屏幕高度，用媒体查询控制html加上头部，底部的区间，避开异性区域。
less
@media only screen and (device-width: 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/