js怎么只支持页面横屏

JS实现页面横屏的方法

在开发移动端网页应用时，通过JavaScript实现页面强制横屏是一项常见需求。这可以提升用户体验，特别是对于需要宽屏视图的应用，如游戏、视频播放或数据可视化。以下是如何实现这一功能的方法：

1. 使用CSS和JavaScript配合、监听屏幕方向变化、动态调整页面样式。其中，监听屏幕方向变化是关键点。

一、使用CSS和JavaScript配合

1. CSS设置

首先，我们可以通过CSS设置页面的基础样式，确保页面在横屏状态下正常显示。在CSS中，可以设置页面的宽度、高度，以及一些基本的样式。

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}
#content {
  width: 90vw;
  height: 90vh;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

2. JavaScript实现横屏

接下来，使用JavaScript来监听屏幕方向的变化，并在检测到竖屏时强制横屏显示。

document.addEventListener("DOMContentLoaded", function() {
    function checkOrientation() {
        if (window.innerHeight > window.innerWidth) {
            // 竖屏状态
            document.body.classList.add("portrait");
            alert("请将设备旋转至横屏模式以获得最佳体验。");
        } else {
            // 横屏状态
            document.body.classList.remove("portrait");
        }
    }
    window.addEventListener("resize", checkOrientation);
    checkOrientation();
});

二、监听屏幕方向变化

通过监听屏幕方向变化，我们可以在用户改变设备方向时动态调整页面样式。

document.addEventListener("DOMContentLoaded", function() {
    function checkOrientation() {
        if (window.innerHeight > window.innerWidth) {
            // 竖屏状态
            document.body.classList.add("portrait");
            alert("请将设备旋转至横屏模式以获得最佳体验。");
        } else {
            // 横屏状态
            document.body.classList.remove("portrait");
        }
    }
    window.addEventListener("resize", checkOrientation);
    checkOrientation();
});

在上述代码中，我们通过window.innerHeight和window.innerWidth来检测屏幕的方向。如果检测到竖屏状态，则添加一个提示信息，建议用户将设备旋转至横屏模式。

三、动态调整页面样式

根据屏幕方向的不同，可以动态调整页面的样式，以确保在不同方向下页面都能正常显示。

.portrait #content {
  transform: rotate(90deg);
  width: 90vh;
  height: 90vw;
}

通过上述CSS样式，我们可以在检测到竖屏状态时，旋转页面内容，以确保用户在竖屏状态下也能看到横屏内容。

四、结合具体应用场景

在实际应用中，可以根据具体的需求，进一步优化上述代码。例如，对于游戏应用，可以在横屏状态下显示游戏界面，而在竖屏状态下显示提示信息，建议用户旋转设备。

document.addEventListener("DOMContentLoaded", function() {
    function checkOrientation() {
        if (window.innerHeight > window.innerWidth) {
            document.body.classList.add("portrait");
            document.getElementById("game").style.display = "none";
            document.getElementById("alert").style.display = "block";
        } else {
            document.body.classList.remove("portrait");
            document.getElementById("game").style.display = "block";
            document.getElementById("alert").style.display = "none";
        }
    }
    window.addEventListener("resize", checkOrientation);
    checkOrientation();
});

<body>
  <div id="alert">请将设备旋转至横屏模式以获得最佳体验。</div>
  <div id="game">游戏内容</div>
</body>

通过上述方法，我们可以实现页面在移动设备上的横屏显示，提升用户体验。根据具体需求，可以进一步优化和扩展上述代码。