资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

js 如何禁止页面横屏

创作时间:

作者:

@小白创作中心

js 如何禁止页面横屏

引用

来源

https://docs.pingcode.com/baike/2548212

在JavaScript中，禁止页面横屏的方法主要有以下几种：使用CSS媒体查询、监听屏幕方向事件、使用JavaScript控制视口属性。其中，使用JavaScript控制视口属性是一种较为直接和有效的方式。通过设置视口的orientation属性，可以强制页面在特定方向上显示，避免用户横屏。接下来，我们将详细探讨这几种方法以及它们的实现方式。

一、使用CSS媒体查询

CSS媒体查询可以检测设备的方向，并根据方向来应用不同的样式。这可以在一定程度上限制页面在特定方向上的显示效果，从而达到禁止横屏的目的。

1.1 CSS媒体查询的基本用法

/* 竖屏样式 */
@media screen and (orientation: portrait) {
  /* 适用于竖屏的样式 */
  body {
    background-color: lightblue;
  }
}

/* 横屏样式 */
@media screen and (orientation: landscape) {
  /* 适用于横屏的样式 */
  body {
    background-color: lightcoral;
  }
}

通过上述代码，可以在设备的方向发生变化时，自动应用不同的样式。虽然这不能完全禁止横屏，但可以在横屏时提示用户或者调整样式以适应横屏。

1.2 提示用户旋转设备

在横屏时，可以通过CSS显示一个提示信息，建议用户旋转设备回到竖屏模式。

/* 提示信息样式 */
#landscape-warning {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px;
  border-radius: 10px;
}

/* 横屏时显示提示信息 */
@media screen and (orientation: landscape) {
  #landscape-warning {
    display: block;
  }
}

<body>
  <div id="landscape-warning">请旋转设备到竖屏模式以获得更好的体验</div>
</body>

这种方法虽然不能完全禁止横屏，但可以有效地提示用户并引导他们回到竖屏模式。

二、监听屏幕方向事件

可以使用JavaScript监听设备方向的变化，并在检测到横屏时强制跳转或提示用户。

2.1 基本实现方法

window.addEventListener("orientationchange", function() {
  if (window.orientation === 90 || window.orientation === -90) {
    alert("请将设备旋转到竖屏模式");
  }
});

通过监听orientationchange事件，可以在设备方向发生变化时执行特定的操作，例如弹出提示框或者强制跳转到特定页面。

2.2 强制跳转到竖屏页面

可以在检测到横屏时，强制跳转到一个只有竖屏才能访问的页面。

window.addEventListener("orientationchange", function() {
  if (window.orientation === 90 || window.orientation === -90) {
    window.location.href = "portrait-only.html";
  }
});

在portrait-only.html页面中，可以设置一个固定的竖屏样式，确保用户只能在竖屏模式下浏览。

三、使用JavaScript控制视口属性

通过JavaScript，可以动态控制视口的meta标签属性，强制页面在特定方向上显示。

3.1 动态设置视口属性

function setViewport() {
  let viewport = document.querySelector("meta[name=viewport]");
  if (!viewport) {
    viewport = document.createElement("meta");
    viewport.name = "viewport";
    document.head.appendChild(viewport);
  }
  if (window.innerHeight > window.innerWidth) {
    viewport.content = "width=device-width, initial-scale=1";
  } else {
    viewport.content = "width=device-height, initial-scale=1";
  }
}
window.addEventListener("resize", setViewport);
window.addEventListener("load", setViewport);

通过上述代码，可以在页面加载和窗口大小变化时，动态设置视口属性，确保页面在竖屏时显示最佳效果。

3.2 配合CSS和JavaScript实现完全禁止横屏

结合CSS和JavaScript，可以实现一种较为完美的禁止横屏方法。

/* 提示信息样式 */
#landscape-warning {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px;
  border-radius: 10px;
  z-index: 9999;
}

/* 横屏时显示提示信息 */
@media screen and (orientation: landscape) {
  #landscape-warning {
    display: block;
  }
  body {
    overflow: hidden;
  }
}

function checkOrientation() {
  if (window.innerHeight > window.innerWidth) {
    document.getElementById("landscape-warning").style.display = "none";
  } else {
    document.getElementById("landscape-warning").style.display = "block";
  }
}
window.addEventListener("resize", checkOrientation);
window.addEventListener("load", checkOrientation);

通过上述代码，可以在横屏时显示提示信息并禁止滚动，确保用户只能在竖屏模式下浏览页面。