orientation=landscape在中无效且应删除，因它非html标准、未被chrome/firefox/safari实现，2024年起主流浏览器已静默丢弃；真正影响@media (orientation: landscape)生效的是width=device-width存在性、viewport未被js覆盖及重排触发。
orientation=landscape 在 <meta name="viewport"> 中根本不会锁定横屏，它只是个被废弃的提示字段，现代浏览器完全忽略它。
为什么 orientation=landscape 无效且应删除
这个参数最早出现在旧版 UC、QQ 浏览器私有扩展中，并非 HTML 标准，也未被 Chrome、Firefox、Safari 实现。2024 年起主流浏览器已明确不解析该值；即使写上，screen.orientation.type 仍返回 "portrait-primary"，CSS @media (orientation: landscape) 也不会因此提前匹配。
- Chrome / Edge / Firefox：静默丢弃，无 warning
- iOS Safari：直接无视，连解析都不做
- 部分安卓 WebView（如微信）：可能报
Invalid meta tag警告但不中断渲染
真正影响 @media (orientation: ...) 生效的前提
媒体查询能否响应方向变化，和 orientation=landscape 无关，而取决于三件事：viewport 是否存在、是否被 JS 覆盖、以及是否触发重排。
- 必须有且仅有一个
<meta name="viewport" content="width=device-width">—— 缺了这句，iOS 和多数 WebView 直接禁用 orientation 媒体查询 - 不能用 JS 动态重写
document.querySelector('meta[name=viewport]').content，会切断方向监听链 - 首次加载时，
matchMedia('(orientation: landscape)').matches可能为false，需手动调用.addEventListener('change', ...)并立即检查一次
替代方案：用 screen.orientation.lock() 的真实约束
这是目前唯一接近“强制”的 API，但它不是“设置”，而是“请求”，且失败是常态。
- 只在 HTTPS 或
localhost下可用；HTTP 页面直接抛SecurityError - 必须由用户手势触发（
click、touchstart），不能在DOMContentLoaded或定时器里调 - iOS Safari 永远返回
NotSupportedError；部分安卓 WebView（如钉钉内嵌）会静默失败 - 成功后，用户仍可通过系统手势退出全屏（比如安卓上滑导航栏），此时
screen.orientation.type会变回"portrait-primary"，需监听change事件做降级处理
CSS 视觉模拟横屏是最可靠兜底
当 JS 锁屏失败或不支持时，靠 CSS 强制视觉旋转，能让内容“看起来”是横屏，虽然物理方向没变。
@media (orientation: portrait) {
body {
transform: rotate(90deg);
transform-origin: left top;
width: 100vh;
height: 100vw;
overflow: hidden;
}
}
注意：transform 会破坏点击区域映射，需配合 pointer-events: none + 绝对定位蒙层修正交互；且 iOS 上 rotate(90deg) 可能导致输入框光标错位，建议只用于展示类页面。
真锁横屏这件事，本质是向系统要权限，不是前端能单方面决定的。所有“强制”方案都绕不开用户动作、HTTPS 环境、设备支持三重校验，漏掉任意一个，就只剩视觉模拟这一条路可走。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
