移动端如何使页面横、竖屏？

移动端实现页面横竖屏切换，前端主要依靠CSS媒体查询和JavaScript来实现。以下是一些常用的方法：

1. CSS 媒体查询 (Media Queries):

这是最常用的方法，可以根据设备的方向来应用不同的样式。

/* 竖屏样式 */
@media screen and (orientation: portrait) {
  body {
    background-color: lightblue; /* 例如竖屏时背景颜色为浅蓝色 */
  }
  .container {
    width: 90%; /* 竖屏时容器宽度为90% */
  }
}

/* 横屏样式 */
@media screen and (orientation: landscape) {
  body {
    background-color: lightcoral; /* 例如横屏时背景颜色为浅珊瑚色 */
  }
  .container {
    width: 70%; /* 横屏时容器宽度为70% */
  }
}

2. JavaScript 配合 CSS:

可以使用 JavaScript 获取设备方向，并动态添加或移除 CSS 类名，从而实现样式切换。

window.addEventListener("orientationchange", function() {
  if (window.orientation === 0 || window.orientation === 180) {
    // 竖屏
    document.body.classList.remove("landscape");
    document.body.classList.add("portrait");
  } else if (window.orientation === 90 || window.orientation === -90) {
    // 横屏
    document.body.classList.remove("portrait");
    document.body.classList.add("landscape");
  }
});

// 初始状态判断
if (window.matchMedia("(orientation: portrait)").matches) {
  document.body.classList.add("portrait");
} else {
  document.body.classList.add("landscape");
}

然后在 CSS 中定义 .portrait 和 .landscape 类的样式。

.portrait {
  background-color: lightblue;
}

.landscape {
  background-color: lightcoral;
}

3. 强制横屏或竖屏显示 (Screen Orientation API):

可以使用 Screen Orientation API 尝试锁定屏幕方向。 需要注意的是，这个 API 的支持情况和用户体验（用户可以覆盖此设置）有所不同。 而且，强制锁定屏幕方向通常不被推荐，因为它会干扰用户的自然操作。 仅在特定场景下（例如游戏或全屏视频播放）才考虑使用。

// 锁定为横屏
screen.orientation.lock("landscape").catch(function(error) {
  console.log("Screen lock failed:", error);
});

// 锁定为竖屏
screen.orientation.lock("portrait").catch(function(error) {
  console.log("Screen lock failed:", error);
});

// 解除锁定
screen.orientation.unlock();

4. meta 标签 (viewport meta tag):

虽然 viewport meta 标签主要用于控制视口大小，但也可以间接影响屏幕方向。 例如，设置 user-scalable=no 可以防止用户缩放，这在某些情况下可能有助于保持所需的屏幕方向。 但这并不是一个可靠的控制屏幕方向的方法。

选择哪种方法？

• 对于简单的样式调整，CSS 媒体查询就足够了。
• 对于需要 JavaScript 交互的更复杂场景，可以使用 JavaScript 配合 CSS。
• 只有在特定场景下才考虑使用 Screen Orientation API 强制锁定屏幕方向。

最佳实践:

• 优先考虑响应式设计: 设计你的页面使其能够适应不同的屏幕方向，而不是强制锁定方向。
• 测试不同设备: 在各种设备和浏览器上测试你的实现，以确保其正常工作。
• 尊重用户偏好: 避免强制锁定屏幕方向，除非绝对必要。

希望这些信息能帮到你!