根据手机窗口大小相对调整iFrame的大小

Question

我将 IFrame 嵌入到我的 html 文件中。外部网页代表一个宽度为 1000px、高度为 480px 的画布，见下文。

我的 IFrame 看起来像这样（我使用 tailwindcss）

  <div class="relative flex w-[1005px] h-[490px] border-1" id="iframe-container">
    <iframe
      id="responsive-iframe"
      src="<external webpage url>"
      class="w-full h-full"
      allowfullscreen
    ></iframe>
  </div>

当我在移动视图中查看嵌入在 iframe 中的画布时，您可以看到它对于页面来说太大了（参见第一张图片）。我希望 iframe 的内容始终完全可见（参见 image2），但我不知道该怎么做

但是，它应该看起来像这样

我尝试了一些方法，例如通过 javascript 减小尺寸并具有 100% 宽度和高度，但它仍然没有显示我想要的。

我的外部网页如下所示。在预览 div 容器内，将插入尺寸为 1000x480px 的画布

<!DOCTYPE html>
<html>
  <head>
    <script src="./assets/phaser/phaser.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        /* width: 100%; */
        /* height: 100%; */
      }

      #preview {
        width: fit-content;
        height: fit-content;
      }

      .testing {
        width: fit-content;
        height: fit-content;
        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>

Answer 1

使用包装 div 来保持 iframe 的宽高比，方法是在调整宽度以适应不同的屏幕尺寸时调整包装的可用高度。

使用

max-width

和

max-height

设置桌面上的最大尺寸。在手机上，我们不希望出现这些尺寸，因为 iframe 不适合窗口宽度，因此使用

max-height

和

max-width

将允许调整这些尺寸以适应屏幕宽度。

然后，

padding-top: 48%

在宽度减小时保持 iframe 的宽高比。该百分比的计算方式为

1000px / 480px = 48%

。

在包装器内，让 iframe 填充可用空间。这使其始终在屏幕宽度内完全可见，因为包装器不会超过窗口宽度。

.iframe-wrapper {
  position: relative;
  width: 100%;
  max-width: 1005px;
  max-height: 490px;
  padding-top: 48%;
  overflow: hidden;
  margin: auto;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="flex items-center justify-center min-h-screen bg-gray-100">
  <div class="iframe-wrapper">
    <iframe id="responsive-iframe" src="<your link>" allowfullscreen></iframe>
  </div>
</div>

根据手机窗口大小相对调整iFrame的大小

问题描述投票：0回答：1

1个回答

最新问题

根据手机窗口大小相对调整iFrame的大小

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1