H5页面适配 iPhoneX
今天再做的h5活动,做到吐,本身html页面是我从别人手里拿过来的,基于mui来写的,其实简单的页面搞的很复杂,到处是坑,调试的恶心,这是开始前的吐槽,哈哈。
今天适配了一下iphoneX机型,最主要的就是底部固定了按钮,按钮被iphoneX的底部线遮挡了,其实就是解决掉内容在安全区域(iphone提出的)显示的问题,
代码:
body {
padding-top: constant(safe-area-inset-top);
*padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
}
第一步:
<meta name=“viewport” content=“width=device-width, viewport-fit=cover”>
第二步:
body {
padding-bottom: env(safe-area-inset-bottom);
}
第三步:fixed 元素的适配
{
padding-bottom: env(safe-area-inset-bottom);
}
或者通过计算函数 calc 覆盖原来高度:
{
height: calc(60px(假设值) + env(safe-area-inset-bottom));
}
单独针对iphonex处理样式
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.mui-bar-tab ~ .mui-content{
padding-bottom: 0.6rem;
}
.next_btn{
height:calc(0.6rem + env(safe-area-inset-bottom));
}
.next_wrap{
height:calc(0.6rem);
border-bottom:solid 1px #ccc;
}
.inner_content{
bottom:0.6rem !important;
}
}
参考:
https://www.cnblogs.com/yanze/p/9409401.html(css判断iphoneX、iphoneXs、iphoneXs Max、iphone XR)
https://blog.csdn.net/wcy7916/article/details/83348192
https://blog.csdn.net/dx18520548758/article/details/80010358
https://segmentfault.com/p/1210000012391116/read
欢迎关注小程序,感谢您的支持!