H5页面适配 iPhoneX

作者: MJ 分类: html 发布时间: 2019-02-27 17:18

今天再做的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

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

邮箱地址不会被公开。 必填项已用*标注