iframe本身不提供横屏功能，本质是通过css transform旋转、viewport元标签调换宽高、或sandbox授权子页调用orientation api来实现视觉横屏，但均受限于同源策略、浏览器兼容性及交互逻辑错位。
iframe 本身不提供“横屏显示”功能，它只是容器；所谓横屏效果，本质是让 iframe 内容在竖屏设备上以横向布局呈现，或强制旋转视图。这需要组合 CSS、viewport 控制和（必要时）JavaScript 才能生效，且多数方案有明确限制。
用 transform: rotate(90deg) 强制旋转整个 iframe
这是最直接的视觉横屏手段，但仅改变渲染角度，不改变逻辑尺寸或交互行为：
- 必须同时设置
width和height互换，否则内容被裁剪 —— 例如原宽 375px、高 667px，旋转后需设width: 667px; height: 375px; - 父容器要加
overflow: hidden;，否则旋转后溢出可见 - 子页面内所有点击、滚动坐标会错位，
iframe内部 JavaScript 无法感知旋转，screen.orientation仍返回"portrait" - 移动端 Safari 对
transform+iframe的合成层处理不稳定，可能出现白屏或闪烁
通过 viewport 元标签 + 媒体查询控制子页面方向
真正起效的前提：你**能修改 iframe 指向的源页面 HTML**（即同源或可控子页面）。否则该方案无效：
- 在子页面
中加入：<meta name="viewport" content="width=device-height, height=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">—— 注意这里width和height调换了 - 配合 CSS：
@media screen and (orientation: portrait) { html { transform: rotate(90deg); transform-origin: center; width: 100vh; height: 100vw; overflow: hidden; } } - 关键点：
transform-origin必须设为center，否则旋转后偏移严重；width/height必须用vh/vw单位，像素值会失效 - 该方式下，子页面内
window.innerWidth仍为竖屏值，但视觉已横置 —— 适合展示静态内容，不适合表单或交互密集型页面
用 sandbox="allow-orientation-lock" 允许子页面锁定横屏
这个属性只对支持屏幕方向 API 的子页面有效，且需子页面主动调用 screen.orientation.lock("landscape")：
-
sandbox必须显式包含allow-orientation-lock，空sandbox或缺失此项将导致DOMException错误 - iOS Safari 完全不支持
screen.orientation.lock()，即使加了 sandbox 也无效；Android Chrome 80+ 支持，但需用户手势触发（如点击按钮），不能 onload 自动锁 - 父页面无法替子页面调用该 API，跨域时更无权干预 —— 所以这不是“父页控制横屏”，而是“授权子页自己决定”
- 常见错误：
Failed to execute 'lock' on 'ScreenOrientation': API can only be initiated by a user gesture.就是没做点击触发
为什么不能靠父页面 JS 直接让 iframe “横屏”
因为浏览器安全模型严格隔离了 iframe 的渲染上下文：
- 父页面 JS 无法读取或修改 iframe 内部的
document.documentElement.style，除非同源且已加载完成 -
window.orientation、screen.orientation、matchMedia("(orientation: landscape)")这些 API 都只反映**父页面自身**的方向，对 iframe 内容无影响 - 试图用
postMessage发送“请横屏”指令，最终仍要靠子页面自己执行旋转或 viewport 切换 —— 父页只是传话，不是开关 - 最常被忽略的一点：很多开发者以为给
iframe加width="100vw" height="100vh"就是横屏，其实这只是拉伸尺寸，内容仍是竖排逻辑，文字依然从上到下读
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
