h5手机端 怎么让手机没有横向

在HTML5开发移动端网页时，如果你想限制页面内容在竖直方向显示，防止用户通过横向滑动浏览，可以采取以下几种方法：

1. **响应式布局**：
使用CSS媒体查询（Media Queries），针对不同的设备视口宽度设置不同的CSS样式。例如，你可以设置当屏幕宽度小于某个特定值时，强制`body`元素变为纵向布局（如`:orientation: portrait`）。

@media screen and (max-width: 600px) {
  body {
    overflow-x: hidden; /* 阻止水平滚动 */
    -webkit-overflow-scrolling: touch; /* 对于WebKit浏览器，启用触摸滚动 */
  }
}

2. **固定布局**：
将容器设置为固定的宽度，并将其高度设置为100%，可以创建一个垂直滚动条而不是横向的。

<div class="vertical-only">
  <!-- 页面内容 -->
</div>

<style>
.vertical-only {
  width: 480px; /* 选择一个适中的固定宽度 */
  height: 100vh; /* 设置为视口高度 */
  overflow-y: auto; /* 只允许垂直滚动 */
  overflow-x: hidden;
}
</style>

3. **禁用横屏模式**：
对于某些现代浏览器，可以尝试检测设备是否处于横屏状态，并阻止横屏。这通常需要使用JavaScript和设备API：

window.addEventListener('deviceorientation', function(e) {
  if (Math.abs(e.gamma) > 10) { // 当倾斜度超过一定阈值，假设超过就是横屏
    window.location.replace(window.location.href); // 重定向回当前页面，阻止横屏切换
  }
});