之前我的处理是:(错误)
@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);