本文介绍通过 javascript 动态设置 iframe 宽高为视口尺寸，并绑定窗口缩放事件，实现真正响应式全屏适配，兼容桌面、平板与手机等各类设备。

要让网页元素（尤其是

✅ 正确做法是：使用原生 JavaScript 获取实时视口尺寸，并在页面加载和窗口重置时持续更新 iframe 的宽高样式。以下是推荐实现：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

<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 页面是否启用 并采用流体布局；
• 对于现代项目，更推荐结合 CSS 容器查询（Container Queries）或 aspect-ratio + vw/vh 单位做声明式适配，JavaScript 方案作为降级兜底。

总结：响应式 iframe 的核心在于「动态绑定视口尺寸」+「生命周期事件监听」。上述方案轻量、兼容性好（支持 IE9+），且无需第三方库，可直接集成到任何静态网站中。