网站建设培训公司长沙网站排名推广

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

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

实现原理就是：使用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