javascript 禁止手机横屏

《javascript 禁止手机横屏》正文开始，本次阅读大概10分钟。

JavaScript可以通过屏幕方向来调整显示效果，而有些人可能并不希望其手机横屏，那么如何禁止手机横屏呢？本文将为大家介绍。

JavaScript可以监听手机屏幕方向，通过调整CSS样式来实现横屏和竖屏的切换。那么如果我们想禁止手机横屏呢？可以使用以下代码：

window.addEventListener("orientationchange", function() {
if (window.orientation == 90 || window.orientation == -90) {
document.documentElement.style.webkitTransform = "none";
document.body.style.width = "100%";
document.body.style.height = "100%";
document.body.style.overflow = "hidden";
document.getElementById("landscape").style.display = "block";
} else {
document.documentElement.style.webkitTransform = "rotate(0)";
document.body.style.width = "auto";
document.body.style.height = "auto";
document.body.style.overflow = "visible";
document.getElementById("landscape").style.display = "none";
}
});

上述代码中，我们监听了屏幕方向变化事件，然后判断当前屏幕方向是否为横屏。如果是横屏，我们就通过修改CSS样式来将网页旋转至竖屏，同时隐藏横屏时显示的HTML元素；如果不是横屏，我们就将网页恢复至竖屏，同时恢复横屏时隐藏的HTML元素。

当然，这只是一种简单的方法，我们还可以通过CSS样式来禁止页面横屏：

@media screen and (orientation: landscape) {
body {
transform: rotate(90deg);
transform-origin: center center;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
}
}

通过上述CSS样式，我们可以禁止页面在横屏模式下滚动，同时固定页面在竖屏状态。这种方法比较简单，但是缺点是无法控制横屏时出现的HTML元素。

总之，禁止手机横屏可以通过JavaScript和CSS方式实现，具体实现方式可根据实际需求进行选择。希望本文能够帮助到大家。