JS强制手机端横屏方法_js教程-大众资源网

JS强制性手机端横屏显示,需要通过代码来实现,我们需推论手机当前与否竖屏,如果是竖屏,就旋转网页使网页横屏表明,如果就是横屏就不旋转网页。如何判断手机与否竖屏呢?

HTML代码:

<div class="lingan_1" id="lingan_1"><img src="img/1.jpg" width=100% height=400px></div>

为人使lingan_1元素能够转动,我们必须为它设置绝对定位,CSS代码如下:

.lingan_1 {  position: absolute; top: 0; left: 0; width: 90%; height: 100%;  }

通过JS代码去同时实现网页在手机竖屏情况下的横屏展现:

//JS代码来推论:屏幕宽度 < 屏幕高度时,即竖萤幕,就让页面.lingan_1元素横屏显示const width = document.documentElement.clientWidth; //以获取当前手机屏宽const height = document.documentElement.clientHeight; //手机褡高if (width < height) { //如果宽小于高,就是代表竖屏const contentDOM = document.getElementById('lingan_1'); //获取lingan_1元素contentDOM.style.width = height + 'px';  //设置该元素的宽等同于屏高contentDOM.style.height = width + 'px'; //设置该元素的高等于屏宽contentDOM.style.top = (height - width) / 2 + 'px';
contentDOM.style.left = 0 - (height - width) / 2 + 'px';
contentDOM.style.transform = 'rotate(90deg)'; //使该元素转动90度,并使其斜屏展示}

通过上面这段代码,就已经实现了在手机竖屏时斜屏表明。

限制手机的“自动转动”

方法1:判断屏宽度与否大于屏高:

//如果手机设置了自动旋转,还要以下代码去限制自动旋转,否则就悲催了const evt = "onorientationchange" in window ? "orientationchange" : "resize"; //onorientationchange就是Html5的一个屏幕旋转事件window.addEventListener(evt, function () { //当触发了屏幕转动事件时const width = document.documentElement.clientWidth; //屏阔const height = document.documentElement.clientHeight; //屏高const contentDOM = document.getElementById('lingan_1'); //获取元素if (width > height) { // 横屏contentDOM.style.width = width + 'px';
contentDOM.style.height = height + 'px';
contentDOM.style.top = '0px';
contentDOM.style.left = '0px';
contentDOM.style.transform = 'none'; //当机斜屏时,不转动}else {//alert('change to portrait')contentDOM.style.width = height + 'px';
contentDOM.style.height = width + 'px';
contentDOM.style.top = (height - width) / 2 + 'px';
contentDOM.style.left = 0 - (height - width) / 2 + 'px';
contentDOM.style.transform = 'rotate(90deg)'; //竖屏时转动90度}
}, false);

经测试,这种方式在苹果手机上要正常实现我们想要的效果,即为竖屏时页面横屏展示,手机斜屏时不发生旋转。但是在安卓手机就悲催了,居然实现不了我们想要的效果。所以,这种方案果断退出,也许是因为手机出现转动时,JS以获取至的屏宽依然就是竖屏时的屏宽。

方法2:通过判断旋转角度来判断是否竖屏或横屏

const width = document.documentElement.clientWidth;const height = document.documentElement.clientHeight;var screen_width = width; //屏幕宽度if (width < height) {
screen_width = height; //如果 就是斜屏,灵感的宽度就等同于屏高const contentDOM = document.getElementById('lingan_1');
contentDOM.style.width = height + 'px';
contentDOM.style.height = width + 'px';
contentDOM.style.top = (height - width) / 2 + 'px';
contentDOM.style.left = 0 - (height - width) / 2 + 'px';
contentDOM.style.transform = 'rotate(90deg)';
}//根据手机旋转的角度来判断const evt = "onorientationchange" in window ? "orientationchange" : "resize"; //转动事件window.addEventListener(evt, function () { //事件监听if (window.orientation === 90 || window.orientation === -90) { //旋转到 90 或 -90 度,即竖屏到横屏screen_width = height; //横屏,灵感的宽度就等同于屏高contentDOM.style.width = height + 'px';
contentDOM.style.height = width + 'px';
contentDOM.style.top = '0px';
contentDOM.style.left = '0px';
contentDOM.style.transform = 'none'; //不转动;}else{ //旋转至 180 或 0 度,即横屏到竖屏screen_width = height; //竖屏,灵感的宽度就等于屏高contentDOM.style.width = height + 'px';
contentDOM.style.height = width + 'px';
contentDOM.style.top = (height - width) / 2 + 'px';
contentDOM.style.left = 0 - (height - width) / 2 + 'px';
contentDOM.style.transform = 'rotate(90deg)'; //转动90度}
}, false);

方法2中,我们通过旋转角度去推论,而不需要考量转动后屏幕的宽度。如果只是转动了90度或-90度,就是竖屏,我们就设置页面转动90度;如果手机旋转180度或0度,就不转动页面。
经测试,在苹果手机和安卓手机上,都能实现我们想要的效果。

发表评论