CSS 如何在HTML5/CSS3中锁定视口为竖屏模式

在本文中，我们将介绍如何使用HTML5和CSS3来锁定视口为竖屏模式。在移动设备上，用户可以旋转其设备以在横屏和竖屏模式之间切换。然而，对于某些网页或应用程序，我们可能需要锁定视口为竖屏模式，以确保内容以最佳形式呈现。下面我们将介绍两种方法来实现这个需求。

阅读更多：CSS 教程

方法一：使用css media查询

首先，我们可以使用CSS media查询来检测设备的宽度和高度，并根据需要设置不同的样式。通过指定限制条件，我们可以强制页面只在竖屏模式下显示。以下是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      @media (orientation: landscape) {
        body {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a sample paragraph.</p>
  </body>
</html>

在上述示例中，我们使用@media规则和orientation属性来指定限制条件。如果设备处于横屏模式，我们隐藏整个页面内容（通过设置display: none;）。这样，在用户旋转设备到横屏模式时，网页内容就会被隐藏。

方法二：使用JavaScript

除了使用CSS，我们还可以使用JavaScript来锁定视口为竖屏模式。以下是一个使用JavaScript的示例：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      #landscape-message {
        display: none;
      }
    </style>
    <script>
      window.addEventListener("orientationchange", function() {
        var landscapeMessage = document.getElementById("landscape-message");
        if (window.orientation === 90 || window.orientation === -90) {
          landscapeMessage.style.display = "block";
        } else {
          landscapeMessage.style.display = "none";
        }
      });
    </script>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p id="landscape-message">Please rotate your device to portrait mode.</p>
    <p>This is a sample paragraph.</p>
  </body>
</html>

在上述示例中，我们添加了一个orientationchange事件监听器，并根据设备的方向设置一个显示或隐藏的消息。如果设备处于横屏模式，我们显示一个提示消息，要求用户将设备旋转到竖屏模式。