1.手机改变字体大小 导致页面适配不了
html { -webkit-text-size-adjust: none !important; }
2.弹窗滚动穿透
弹窗上设置样式 height: 100vh; overflow: hidden;
当弹窗不需要滚动时, 也可以监听touchmove 禁用掉
3.获取手机状态栏
ios的顶部状态栏不像android会给你空出来,所以h5 页面需要动态获取ios手机顶部的状态栏
const getBarTopHeight=()=>{
let barTopHeight;
if(isApp().indexOf('iphone') > 0){
barTopHeight = 21;
const deviceWidth = window.screen.width;
const deviceHeight = window.screen.height;
const devicePixelRatio = window.devicePixelRatio;
if(
(deviceWidth == 375 && deviceHeight == 812 && devicePixelRatio == 3) ||
(deviceWidth == 390 && deviceHeight == 844 && devicePixelRatio == 3) ||
(deviceWidth == 414 && deviceHeight == 896 && devicePixelRatio == 3) ||
(deviceWidth == 428 && deviceHeight == 926 && devicePixelRatio == 3)
) barTopHeight = 40;
}else if(isApp().indexOf('android') > 0){
const AZBarTop = window.LocalFunction && window.LocalFunction.getStatusBarHeight();
if (AZBarTop) barTopHeight = AZBarTop / window.devicePixelRatio;
}
return barTopHeight;
}