不能直接读取父页面的window.screen，因其为独立只读对象，反映当前设备物理分辨率；同源时parent.screen.width仍返回父设备原始宽度，跨域则触发SecurityError；真正需获取的是父页视口尺寸，须通过postMessage通信传递innerWidth/innerHeight并持续监听更新。
iframe 里无法直接读取父页面的 window.screen，因为 screen 是只读的全局对象，每个窗口（包括 iframe）都拥有自己独立的 screen 实例——它反映的是**当前执行环境所在设备**的物理分辨率，不是父页“当前显示区域”的尺寸。
为什么不能直接用 parent.screen.width
即使同源，parent.screen.width 返回的仍是父窗口所在设备的原始屏幕宽（比如 MacBook 的 1680），而非父页当前视口宽度；更关键的是，跨域 iframe 根本无法访问 parent 的任何属性，会触发 SecurityError。这不是权限问题，而是浏览器对 screen 对象的隔离设计。
真正该获取的是父页的视口尺寸（不是 screen）
多数场景下你真正需要的不是“设备分辨率”，而是父页当前可见区域大小（即用户实际看到的 CSS 像素宽高），这要用 window.innerWidth 和 window.innerHeight。但 iframe 无法直接读取父页这些值，必须靠通信：
- 父页在 resize 或初始化时主动发消息：
window.parent.postMessage({ type: 'viewport-size', width: window.innerWidth, height: window.innerHeight }, '*') - iframe 内监听：
window.addEventListener('message', e => { if (e.data.type === 'viewport-size') { /* 使用 e.data.width / e.data.height */ } }) - 务必校验
e.origin（尤其跨域），避免恶意消息干扰
如果真要设备级分辨率，只能由父页提供
screen.width 和 screen.height 属于敏感信息，现代浏览器禁止 iframe 窥探父页设备参数。若业务强依赖（如投屏适配），唯一合规路径是父页自行读取并显式透出：
立即学习“前端免费学习笔记（深入）”；
- 父页发送：
window.parent.postMessage({ type: 'screen-info', width: screen.width, height: screen.height, dpr: window.devicePixelRatio }, targetOrigin) - iframe 收到后，应结合
dpr和自身getBoundingClientRect()做渲染适配，而不是直接拿screen.width做响应式判断 - 注意：iOS Safari 中
screen.availHeight等值不可靠，且所有screen.*在隐私模式下可能被降级为固定值（如 1920×1080）
最易被忽略的一点：父页的 window.innerWidth 会在地址栏展开/收起、横竖屏切换、外接显示器拖入等场景下动态变化，仅发一次消息远远不够——iframe 必须持续监听父页发来的更新，否则布局会迅速失准。
