html设置页面横屏

在HTML中，可以使用CSS中的属性和媒体查询来控制页面的横向和纵向布局。如果您想在网页中让页面横屏显示，可以使用以下步骤：

设置视口设置
在网页头部加入以下代码：

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

这个代码可以让视口适应移动设备的屏幕宽度，并且不允许用户缩放页面。

强制横向显示
在CSS中添加以下代码：

@media screen and (orientation: landscape) {
  /* 横竖屏判断 */
  /* 横屏样式 */
}

这个代码块在匹配屏幕横向时运行，并通过添加横向布局样式，强制横屏显示。

例如，以下CSS代码片段会将页面的背景颜色设置为蓝色，并将页面内容旋转90度以横向显示：

@media screen and (orientation: landscape) {
  body {
    background-color: blue;
    transform: rotate(90deg);
    transform-origin: left top;
  }
}

强制全屏横向显示
您还可以使用以下代码将页面强制横向全屏幕显示：

@media screen and (orientation: landscape) {
  html {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: top right;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

这个代码块会将html和body元素设置为全屏幕，并在body元素上应用旋转和平移转换，以强制横向全屏幕显示。