子页面应自行通过matchMedia('(max-width: 768px)')结合/userAgent匹配Android|iPhone|iPod|iPad|Mobile/判断设备类型，避免依赖父页传递；matchMedia更可信，可响应横竖屏与缩放，UA仅作辅助白名单。
iframe子页面如何检测宿主是否为手机浏览器
iframe里的页面（子页面）本身无法直接读取父页面的设备信息，但可以通过两种可靠路径间接判断：一是继承父页传入的设备标识，二是自行检测自身运行环境。后者更常用、更可控。
子页面用 matchMedia 和 navigator.userAgent 自行判断
子页面应像独立页面一样做设备检测，不能依赖父页“告诉”它是不是手机——因为父页可能没传、传错了、或跨域根本传不了。最稳妥的方式是子页面自己执行判断逻辑：
-
matchMedia('(max-width: 768px)')比 UA 更可信，能响应横竖屏切换和缩放，适合做 UI 适配依据 -
/Android|iPhone|iPod|iPad|Mobile/i.test(navigator.userAgent)作为辅助白名单，避免把小窗桌面误判为手机 - 不要只用
userAgent.includes('Mobile')—— iPad 的 UA 常含 Mobile 却不是手机；某些桌面浏览器模拟移动设备时也会注入 Mobile - 组合使用更准：
const isMobileLike = mql.matches && /Android|iPhone|iPod/.test(navigator.userAgent)
父页向 iframe 传设备类型必须用 postMessage，且仅限同源
如果父页已知自身是手机访问，并希望显式告知 iframe 子页面，唯一安全方式是通过 postMessage 发送消息。但注意：
- 跨域 iframe 无法调用
iframe.contentWindow.postMessage，会抛SecurityError，此时该方案失效 - 同源前提下，必须等
iframe.onload触发后再发，否则contentWindow可能为null - 发送时要校验
targetOrigin，不能用'*'；子页面接收时必须严格比对event.origin，防止伪造 - 消息内容只能是可序列化值，例如：
{ type: 'device-info', device: 'mobile' }
容易被忽略的关键点
子页面在 iframe 中运行时，window.innerWidth、screen.width 等值反映的是 iframe 自身尺寸，不是宿主视口——除非 iframe 设置了 width="100%" height="100%" 且无滚动条，否则这些值不可信。真正可靠的仍是 matchMedia 查询宿主顶层窗口，它不受 iframe 嵌套影响。
立即学习“前端免费学习笔记（深入）”；
