本文介绍通过 javascript 动态设置 iframe 宽高为视口尺寸，并绑定窗口缩放事件，实现真正响应式全屏适配，兼容桌面、平板与手机等各类设备。
要让网页元素（尤其是 <iframe>）在不同设备上始终填满可用视口区域，仅靠 CSS 百分比或固定值远远不够——因为 width: 100% 依赖父容器，而 height: 100% 在无明确高度上下文时会失效；同时，$(window).height() 仅在页面加载时执行一次，无法响应用户缩放、横竖屏切换等动态行为。
✅ 正确做法是：使用原生 JavaScript 获取实时视口尺寸，并在页面加载和窗口重置时持续更新 iframe 的宽高样式。以下是推荐实现：
<p align="center">
<iframe
src="https://example.com"
style="border: 0; border-radius: 0; margin-top: 20px;"
id="iframe"
class="myIframe"
allowfullscreen
loading="lazy"
></iframe>
</p>
<script>
const iframe = document.querySelector('.myIframe');
function setIframeSize() {
// 使用 window.innerWidth/Height 获取真实可视区域尺寸（不含滚动条）
iframe.style.width = window.innerWidth + 'px';
iframe.style.height = window.innerHeight + 'px';
}
// 页面加载完成时立即设置
setIframeSize();
// 监听窗口大小变化（包括横竖屏切换、浏览器缩放、DevTools 开启等）
window.addEventListener('resize', setIframeSize);
// 【进阶建议】可额外监听 orientationchange（iOS Safari 兼容性补充）
window.addEventListener('orientationchange', setIframeSize);
</script>⚠️ 注意事项：
- 避免混用 jQuery 与原生 DOM 操作（如原问题中 $('.myIframe').css(...)），既增加依赖又降低性能；
- window.innerWidth/Height 返回的是 CSS 像素（device-independent pixels），已自动适配 DPR（设备像素比），无需手动处理高清屏；
- 若 iframe 内容本身不支持响应式（如固定宽高的 Flash 或旧游戏），需同步检查其 src 页面是否启用 <meta name="viewport"> 并采用流体布局；
- 对于现代项目，更推荐结合 CSS 容器查询（Container Queries）或 aspect-ratio + vw/vh 单位做声明式适配，JavaScript 方案作为降级兜底。
总结：响应式 iframe 的核心在于「动态绑定视口尺寸」+「生命周期事件监听」。上述方案轻量、兼容性好（支持 IE9+），且无需第三方库，可直接集成到任何静态网站中。
