zoukankan      html  css  js  c++  java
  • 移动端横屏处理

    之前我的处理是:(错误)

    @media screen and (orientation: landscape) {
            .update-main-content {
                    padding: 2.18rem 0 2.18rem 0;
          }
    }

    因为这个项目是老项目,px转rem只是简单地在页面初始化的时候根据document.documentElement.clientWidth这个来算,注意当横屏的时候,它的rem还是之前竖屏的。

    所以正确的处理应该是先检测现在是横屏还是竖屏,再进行计算rem

       function initLandscape() {
           var clientHeight = document.documentElement.clientHeight || window.innerHeight || window.screen.height;
           var fontSize = clientHeight > 1080 ? 100 : clientHeight / 10.8;
           fontSize = fontSize > 22 ? fontSize : 22;
           document.documentElement.style.fontSize = fontSize + 'px';
       };
    
      //判断手机横屏状态:
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
            if (window.orientation === 90 || window.orientation === -90 ){ 
                location.reload(true);
                initLandscape();
            }  
        }, false);
  • 相关阅读:
    算法第四章上机实验报告
    算法第四章作业
    算法第三章上机实验报告
    算法第三章作业
    算法第二章上机实验报告
    算法第二章作业
    第五次c++作业总结
    第三次c++作业总结
    Linux上部署Java项目
    JVM类加载
  • 原文地址:https://www.cnblogs.com/caoshufang/p/11754668.html
Copyright © 2011-2022 走看看