当前位置：首页 > news >正文

前端网页或者pwa如何实现只横屏显示，设备竖着的时候依然保持横屏

news 来源：原创 2025/5/23 8:16:00

开发的时候，就是以横屏的样式开发的，所以横屏的展示效果就是：

当设备竖着的时候，会进行缩放，展示效果不友好，所以需要设备竖着的时候，也横屏显示：

实现原理就是：使用css监听设备朝向

当设备竖着的时候，就让body旋转90度，并且宽高要进行缩放：

/* 竖屏 */
@media screen and (orientation: portrait) {
    body {
        transform: rotate(90deg) scale(1, 0.78);
    }
}

代码说明：

@media screen and (orientation: portrait) {
  /* 当设备方向为竖屏时，应用以下样式 */
  body {
    transform: rotate(90deg); /* 将 body 内容旋转 90 度 */
    transform-origin: left top; /* 设置旋转的基准点为左上角 */
    width: 100vh; /* 将宽度设置为视口高度的 100% */
    height: 100vw; /* 将高度设置为视口宽度的 100% */
    overflow-x: hidden; /* 隐藏水平滚动条 */
    position: absolute; /* 使用绝对定位，使 body 脱离文档流 */
    top: 100%; /* 将 body 向下移动 100% 的高度 */
    left: 0; /* 将 body 向左对齐 */
  }
}

scale说明：scale() - CSS：层叠样式表 | MDN