手机横竖屏切换时,比如横屏切竖屏,手机仍然会按横屏的宽度进行布局,这时需要截取横竖屏切换瞬间进行页面重加载。




// 横竖屏切换时从新加载

    window.addEventListener('orientationchange',function(){

        location.reload();

    },false);

// 横竖屏切换时从新加载 保证横竖屏切换时元素正常显示



有的手机切换时页面会自行放大。

需要手动加META标签


<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

<!-- 禁止手机放大缩小 -->



然后在底部最后对比一下7.5rem宽度的元素和100%宽度元素宽度是否一致

<script type="text/javascript">

        // 将屏幕平分成7.5rem

        document.documentElement.style.fontSize=document.documentElement.clientWidth/750*100+"px";

        // 将屏幕平分成7.5rem

        // 如果section内元素宽度大于NAV

        if($('nav').eq(0).width()<$('.single_game_box').eq(0).width()){

location.reload();

            console.log('重新加载');

        }else{

            console.log('不用加载');

        }

        // 如果section内元素宽度大于NAV 重新加载


</script>

Created with the Personal Edition of HelpNDoc: Full-featured Documentation generator