meta标签无法锁定横竖屏，现代浏览器基本忽略screen-orientation等属性；真正可用的是screen.orientation.lock()，但需HTTPS、用户手势触发且iOS不支持；视觉模拟CSS是当前最可靠兜底方案。
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 行为，现已修复在 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)
- 必须运行在 HTTPS 或
-
示例安全调用：
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仍返回真实值
-
真正的横竖屏锁定能力不在 HTML 层，也不在 meta 标签里。它取决于浏览器是否暴露 screen.orientation API、是否在安全上下文中、是否由用户激活——而 iOS 则彻底关闭了这扇门。别在 meta 上浪费调试时间，优先做检测 + 提示 + 视觉兜底。
