网页在移动端强制横屏

思路：如果用户设备在竖屏模式下，就造一个横屏的容器(div)，把他旋转90度；如果用户设备本身就是横屏，则还原最原始状态。

HTML代码：

<body>
　　<div id="app">
　　　　<h1>我是一个测试网页</h1>
　　</div>
</body>

JS方法：

function crossFun(ele) {
　　var width = document.documentElement.clientWidth;
　　var height = document.documentElement.clientHeight;
　　　　//第一次进来  判断是不是横屏
　　if(width < height) {
　　　　ele.style.width = height + 'px';
　　　　ele.style.height = width + 'px';
　　　　ele.style.top = (height - width) / 2 + 'px';
　　　　ele.style.left = 0 - (height - width) / 2 + 'px';
　　　　ele.style.transform = 'rotate(90deg)';
　　　　ele.style.transformOrign = '50% 50%';
       ele.style.position = 'relative';
     }
        //设备旋转或者窗口变化时候进行  横竖屏处理     在来回切换的时候回出现BUG  使用定时器解决
　　　var evt = "onorientationchange" in window ? "orientationchange" : "resize";
            
　　　window.addEventListener(evt, function() {
　　　　　setTimeout(function() {
　　　　　　　var width = document.documentElement.clientWidth;
　　　　　　　var height = document.documentElement.clientHeight;
　　　　　　　if(width > height) {
               ele.style.width = width + 'px';
               ele.style.height = height + 'px';
               ele.style.top = 0;
               ele.style.left = 0;
               ele.style.transform = 'none';
               ele.style.transformOrign = '50% 50%';
               ele.style.position = 'relative';
　　　　　　} else {
　　　　　　　　ele.style.width = height + 'px';
　　　　　　　　ele.style.height = width + 'px';
　　　　　　　　ele.style.top = (height - width) / 2 + 'px';
　　　　　　　　ele.style.left = 0 - (height - width) / 2 + 'px';
　　　　　　　　ele.style.transform = 'rotate(90deg)';
　　　　　　　　ele.style.transformOrign = '50% 50%';
　　　　　　　　ele.style.position = 'relative';
　　　　　　}
            
　　　　}, 100);
            
　　}, false);
}

使用：

crossFun(document.getElementById('app')); //注意 方法里面用的是原生的方法  传入的DOM应该用原生的方式获取  或者对原方法进行修改即可

竖屏效果：

横屏效果：

posted on 2018-04-09 15:32 Facker 阅读(415) 评论(0) 编辑收藏举报