码迷,mamicode.com
首页 > 移动开发 > 详细

移动端横屏处理

时间:2019-10-28 20:36:47      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:pre   padding   nts   client   and   lis   res   项目   element   

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

@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);

 

移动端横屏处理

标签:pre   padding   nts   client   and   lis   res   项目   element   

原文地址:https://www.cnblogs.com/caoshufang/p/11754668.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!