iPhone X 底部菜单走光的问题

刘海的问题.我们一直没有关注.客户反映没有自适应iphone X.

解决方法就是写个head里面添加meta新属性+伪类:after+media screen媒体查询相结合一下.解决问题.供大家参考一下.自己也备忘录吧,很简单.

之前申请测试机比较艰辛.老大今天尽然同意购买一台Iphone X.wow.老大心里会不会想我自己都没有用上IPhone X ~~不会扣我年终奖不.小担心中

代码:

第一步:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">

第二步:

.footer:after {

height: 0px !important;

height: -webkit-calc( constant(safe-area-inset-bottom) + 0px) !important;

height: calc( constant(safe-area-inset-bottom) + 0px) !important;
height: -webkit-calc( env(safe-area-inset-bottom) + 0px) !important;
height: calc( env(safe-area-inset-bottom) + 0px) !important;
display: block !important;
content: "" !important;
position: fixed !important;
left: 0 !important;
bottom: 0 !important;
width: 100% !important;
background: #fff !important;
}

@media only screen and (device-width: 375px) and (device-height: 812px) and
(-webkit-device-pixel-ratio: 3) {
.footer {
bottom: -webkit-calc( constant(safe-area-inset-bottom) + 0px) !important;
bottom: calc( constant(safe-area-inset-bottom) + 0px) !important;
bottom: -webkit-calc( env(safe-area-inset-bottom) + 0px) !important;
bottom: calc( env(safe-area-inset-bottom) + 0px) !important;
}
}