移动端出现的问题

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;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容