网页在手机端自动横屏 js实现

以下是使用JavaScript实现网页在手机端自动横屏的代码：

window.addEventListener("orientationchange", function() {
    var orientation = window.orientation;
    if (orientation === 90 || orientation === -90) {
        document.body.style.transform = "rotate(-90deg)";
        document.body.style.transformOrigin = "top right";
        document.body.style.width = "100vh";
        document.body.style.height = "100vw";
        document.body.style.position = "absolute";
        document.body.style.top = "100%";
        document.body.style.left = "0";
    } else {
        document.body.style.transform = "";
        document.body.style.transformOrigin = "";
        document.body.style.width = "";
        document.body.style.height = "";
        document.body.style.position = "";
        document.body.style.top = "";
        document.body.style.left = "";
    }
});

这段代码监听了`orientationchange`事件，当手机屏幕方向发生变化时会触发该事件。在事件处理函数中，通过判断当前屏幕方向是否为横向，来动态设置网页的样式。

如果屏幕方向为横向，则使用`transform`属性将网页旋转90度，并设置`transform-origin`、`width`、`height`、`position`、`top`和`left`等样式，以使网页在手机端自动横屏。反之，则将这些样式重置为默认值，以保证网页在纵向时正常显示。

需要注意的是，使用JavaScript实现网页自动横屏需要在网页头部添加以下的meta标签，以保证在手机端正常显示：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

这段代码指定了网页视图的宽度等于设备的宽度，同时禁用了缩放和用户手动缩放的功能。