h5手机横屏竖屏样式bug

最新推荐文章于 2024-04-08 17:45:31 发布

原创最新推荐文章于 2024-04-08 17:45:31 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

H5 专栏收录该内容

3 篇文章

订阅专栏

由于给定内容仅提及‘解决方法：’，未包含关键信息，无法生成有效摘要。

状态	竖屏	横屏
修改前
修改后

解决方法：

    function verticaHorizontalScreenChange() {//横屏竖屏切换处理事件函数
      if (window.orientation == 90 || window.orientation == -90) {   //横屏
          htmlFontSizeChange();//横屏的时候更改html的字体大小
      } else {  //竖屏
          window.location.reload();
      }
    }
    function htmlFontSizeChange(){
      let w = $(window),
       w.width() >  w.height()? fontsize =  w.height(): fontsize =  w.width();
      $("html").css('font-size',~~(fontsize *100000/36)/100000+"px");
    }
     window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", verticalHorizontalChange, false);//监听横屏竖屏切换事件