javascript 禁止手机横屏

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方式实现，具体实现方式可根据实际需求进行选择。希望本文能够帮助到大家。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！