index.html中的Meta标签控制移动端横竖屏锁定：HTML5移动规范-html教程-PHP中文网

meta标签无法锁定横竖屏，现代浏览器基本忽略screen-orientation等属性；真正可用的是screen.orientation.lock()，但需https、用户手势触发且ios不支持；视觉模拟css是当前最可靠兜底方案。

index.html中的meta标签控制移动端横竖屏锁定：html5移动规范

meta 标签无法真正锁定横竖屏，它只能提示或影响部分旧版浏览器的渲染行为，现代标准下已基本失效。

`screen-orientation` meta 属性在绝大多数浏览器中被忽略

Chrome、Firefox、Edge（Android/iOS）完全不识别 screen-orientation 这个 meta 名称
UC 和 QQ 浏览器曾短暂支持 screen-orientation 和 x5-orientation，但自 2021 年起陆续弃用，当前版本（2026）基本无响应
iOS Safari 对所有 orientation 相关 meta 完全无视，连解析都不做
即使写成 <meta name="screen-orientation" content="portrait">，也不会触发任何方向限制逻辑
不要把它当作锁屏手段，它不是规范的一部分，W3C HTML5 标准中从未定义该属性
若页面中存在多个 conflicting 的 meta（如同时设 portrait 和 landscape），行为不可预测，通常以最后一个为准，但多数浏览器直接跳过
部分安卓 WebView（如微信 v8.0.40+）会静默丢弃该标签，控制台无警告

`viewport` 中的 `user-scalable=no` 不能阻止旋转

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
只影响缩放手势，和屏幕物理旋转无关
用户仍可自由横置设备，浏览器照常触发 resize 或 orientationchange 事件
某些低端安卓机（如旧版华为 EMUI）曾将 user-scalable=no 错误映射为“禁转屏”，属 bug 行为，现已修复

Doc To HTML
使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载
在 iOS 上，该 viewport 设置对旋转零影响
Android Chrome 会正确区分“缩放”与“旋转”，两者互不干扰
若误以为加了这个就等于锁屏，会导致横屏后布局错乱却无任何 fallback 提示

真正可用的方向控制必须依赖 `screen.orientation.lock()`

唯一被现代浏览器（Chrome/Firefox Android ≥80）部分实现的 API 是 screen.orientation.lock()
但它有硬性前提：
- 必须运行在 HTTPS 或 localhost（HTTP 页面直接报 SecurityError）
- 必须由用户手势（click、touchstart）触发，不能在 DOMContentLoaded 或 setTimeout 中调用
- iOS Safari 返回 NotSupportedError 或直接 undefined，无法绕过
- 调用前需检查：if ('orientation' in screen && 'lock' in screen.orientation)

示例安全调用：

button.addEventListener('click', async () => {
if (!screen.orientation?.lock) return;
try {
  await screen.orientation.lock('portrait');
} catch (err) {
  if (err.name === 'NotAllowedError') console.warn('未由用户触发');
  if (err.name === 'NotSupportedError') console.warn('浏览器不支持');
}
});

视觉模拟是目前最可靠的“伪锁定”方案

当真实锁定失败（尤其是 iOS），靠 CSS 强制视觉旋转是最实用的兜底：

@media (orientation: landscape) {
body {
  transform: rotate(90deg) translate(100vw);
  transform-origin: top left;
  width: 100vh;
  height: 100vw;
  overflow: hidden;
  position: absolute;
}
}

注意点：
- translate(100vw) 是为了把旋转后溢出左上角的内容“拉回视口”
- 必须配合 overflow: hidden 和 position: absolute，否则滚动条或白边暴露破绽
- 输入框（<input>）获得焦点时，iOS 会强制恢复原生方向并放大，此时需监听 focusin 做临时隐藏或遮罩
- 这种方式不改变设备实际方向，仅欺骗人眼；传感器、window.orientation、screen.orientation.type 仍返回真实值