web适配移动端横屏

Web适配移动端横屏可以通过以下几个步骤实现：

1. 使用meta标签来控制视口：在head标签中添加以下代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 使用CSS媒体查询来调整样式：使用CSS媒体查询来检测设备的宽度，并根据宽度来调整样式，以适应不同的屏幕大小。

@media screen and (max-width: 480px) {
  /* 在这里添加你的样式 */
}

3. 监听设备方向变化：使用JavaScript来监听设备的方向变化，当用户将设备旋转到横向时，重新布局页面。

window.addEventListener("orientationchange", function() {
  // 判断是否为横屏
  if (window.orientation == 90 || window.orientation == -90) {
    // 横屏布局
  } else {
    // 竖屏布局
  }
}, false);