求助：如何让IFrame根据移动端窗口尺寸自适应显示完整Canvas

核心问题分析 #

当前IFrame容器用固定宽高w-[1005px] h-[490px]，移动端屏幕宽度不足时必然溢出；同时外部网页里的.testing和#preview用了fit-content，会强制保持Canvas的原始1000px×480px尺寸，导致无法自适应容器。下面是针对性修复方案：

1. 修改IFrame容器的响应式样式 #

把固定宽高改成按Canvas比例自适应的布局，用Tailwind的aspect-ratio和max-width确保任何屏幕下都完整显示：

<div class="relative max-w-full border-1 aspect-[1000/480]" id="iframe-container">
  <iframe
    id="responsive-iframe"
    src="<external webpage url>"
    class="w-full h-full"
    allowfullscreen
  ></iframe>
</div>

• aspect-[1000/480]：严格匹配Canvas的宽高比（1000:480）
• max-w-full：限制容器最大宽度不超过父元素（移动端即屏幕宽度）
• 移除flex，无需弹性布局

2. 调整外部网页的样式 #

让外部网页的根元素和容器能自适应IFrame尺寸，而非固定原始大小：

<!DOCTYPE html>
<html>
  <head>
    <script src="./assets/phaser/phaser.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- 新增移动端视口设置 -->

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden; /* 防止滚动条出现 */
      }

      #preview {
        width: 100%;
        height: 100%;
      }

      .testing {
        width: 100%;
        height: 100%;
        border: 1px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>

  <body>
    <div class="testing">
      <div id="preview" name="preview"></div>
      <script type="module" src="start.js"></script>
    </div>
  </body>
</html>

• 新增<meta name="viewport">：确保移动端浏览器正确识别屏幕宽度
• 将html/body、.testing、#preview的宽高改为100%：让容器完全填充IFrame空间
• 添加overflow: hidden：避免内容溢出产生滚动条

3. 配置Phaser游戏的自适应缩放 #

由于使用Phaser创建Canvas，必须在游戏配置里开启自适应模式，让Canvas自动适配容器：

// start.js 中的游戏配置
const config = {
  type: Phaser.AUTO,
  parent: 'preview',
  width: 1000,
  height: 480,
  scale: {
    mode: Phaser.Scale.FIT, // 按比例缩放，完整显示内容
    autoCenter: Phaser.Scale.CENTER_BOTH, // 居中显示
    min: { width: 320, height: 153 }, // 可选：设置最小缩放尺寸
    max: { width: 1000, height: 480 } // 可选：设置最大缩放尺寸（不超过原始大小）
  },
  // 其他游戏配置...
};

const game = new Phaser.Game(config);

• Phaser.Scale.FIT：保证Canvas按比例缩放，不裁剪内容且填满容器
• autoCenter：让缩放后的Canvas在容器中居中

为什么之前的方法没用？ #

• 直接设width:100% height:100%：未保持宽高比，会导致Canvas拉伸变形
• 单纯用JS调整尺寸：未同步Phaser的缩放配置，Phaser会强制保持原始Canvas尺寸

内容的提问来源于stack exchange，提问作者Daniel12