移动端通过css锁定横屏显示提示，核心做法是结合 @media (orientation: landscape) 媒体查询与 transform 旋转属性。当设备处于竖屏状态时，利用 rotate(90deg) 将内容强制旋转至横向布局，同时配合 overflow: hidden 隐藏滚动条，从而在视觉上实现“锁定横屏”的效果。需要注意的是，这种纯 css 方案仅改变视觉呈现，无法阻止用户物理旋转设备，且可能影响部分浏览器的交互体验。
@media (orientation: portrait) 如何触发旋转逻辑？
该媒体查询专门针对竖屏状态（屏幕高度大于宽度）生效。在此状态下，我们将根容器或主体元素顺时针旋转 90 度，并调整其定位坐标，使其占据横屏空间。具体而言，设置 transform-origin 为右下角或中心点，避免旋转后偏移出视口，并通过 width 和 height 互换尺寸来适配新的方向。
.container {
width: 100vh;
height: 100vw;
transform: rotate(90deg);
transform-origin: bottom right;
position: absolute;
right: 0;
bottom: 0;
}
上述代码中，width 设为视口高度，height 设为视口宽度，确保旋转后的内容填满屏幕。 transform-origin: bottom right 保证旋转轴心在右下角，使内容从右下向左上展开，符合横屏阅读习惯。若未设置 position，元素可能脱离文档流导致布局错乱。
如何防止竖屏时的内容溢出与滚动？
在旋转过程中，若不限制滚动行为，用户仍可通过滑动查看被“折叠”的内容。解决方法是在 body 或根元素上设置 overflow: hidden，并禁用触摸滚动事件。同时，需确保旋转后的容器尺寸严格匹配视口，避免因边距或边框导致溢出。
body, html {
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
此段代码全局禁用滚动，配合前文的旋转样式，形成完整的横屏锁定效果。注意 margin: 0 和 padding: 0 消除默认间距，防止旋转后出现白边。若页面包含固定定位元素，需额外检查其 z-index 层级，避免被旋转容器遮挡。
旋转后文字与图片是否会出现模糊或错位？
是的，直接旋转可能导致子元素继承变换矩阵，引发渲染异常。例如，图片可能因抗锯齿算法变化而轻微模糊，文字则可能因字体渲染引擎对旋转支持不佳而出现边缘锯齿。此外，若子元素使用绝对定位，其坐标基准可能随父级旋转而偏移，造成错位。
为解决此问题，可对内部关键元素应用 transform: rotate(-90deg) 进行反向补偿，恢复原始朝向。同时，启用硬件加速属性如 will-change: transform 提升渲染性能。对于高精度图像，建议提供横屏专用版本，避免依赖 CSS 旋转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
