如何在无方向感知的显示器/电视上通过Web技术旋转视口-90°？

嘿，这个场景我之前帮客户处理过竖屏电视展示的需求，完全可以不依赖屏幕的方向感知功能，用HTML+CSS轻松搞定，下面给你具体的实现方案：

核心思路 #

咱们跳过屏幕的方向检测，直接通过CSS强制旋转整个页面内容，再调整视口和元素的尺寸、位置，让旋转后的内容刚好铺满无方向感知的竖屏显示器。

具体实现步骤 #

1. 配置适配旋转的Viewport #

首先在HTML的<head>里设置正确的视口参数，确保旋转后内容能完美适配屏幕：

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

• width=device-height：旋转-90度后，原屏幕的高度会变成内容的宽度，所以把视口宽度设为设备高度，保证内容不会被截断。
• user-scalable=no：避免用户误触缩放导致布局混乱，你可以根据需求决定是否保留。

2. CSS强制旋转并校正布局 #

给<body>或者你的根容器添加以下样式，实现旋转和位置调整：

body {
  margin: 0;
  padding: 0;
  /* 实现顺时针旋转90度（等价于-90度的旋转效果） */
  transform: rotate(-90deg);
  /* 设置旋转原点为左上角，这是校正位置的关键 */
  transform-origin: top left;
  /* 旋转后维度互换：宽度用原屏幕高度，高度用原屏幕宽度 */
  width: 100vh;
  height: 100vw;
  /* 固定定位，确保内容铺满屏幕且不会出现滚动条 */
  position: fixed;
  /* 把旋转后偏移到屏幕外的内容拉回可见区域 */
  top: 100%;
  left: 0;
  /* 可选：防止内容溢出 */
  overflow: hidden;
}

这里的transform-origin: top left和top:100%是核心——默认旋转原点是元素中心，旋转后内容会跑到屏幕外面，这两个属性能把内容拉回正确的显示位置。

3. 可选：JS动态适配窗口变化 #

如果需要处理设备分辨率调整、窗口大小变化的情况，可以加一段JS监听：

function adjustRotationLayout() {
  const body = document.body;
  body.style.width = `${window.innerHeight}px`;
  body.style.height = `${window.innerWidth}px`;
}

// 页面加载时初始化一次
window.addEventListener('load', adjustRotationLayout);
// 窗口大小变化时重新调整
window.addEventListener('resize', adjustRotationLayout);

你的疑问解答 #

• 这个需求能通过HTML实现吗？ 当然可以！上面的方案就是纯HTML+CSS（可选JS）实现的，完全不依赖屏幕的方向感知功能——咱们是直接强制旋转整个视口内容，不管屏幕会不会报告方向。
• 为什么@media的orientation属性没用？ 因为你的电视屏幕没有方向感知模块，根本不会触发orientation的媒体查询，所以直接用CSS transform是最可靠的方案。

内容的提问来源于stack exchange，提问作者FroPT