iframe 将全高清屏幕上的完整网页放入小窗口答案

【问题标题】：iframe Fits complete webpage as on Full HD Screen in to a small Windowiframe 将全高清屏幕上的完整网页放入小窗口
【发布时间】：2022-02-10 20:44:21
【问题描述】：

在第一张图片中，我加载了 6 个 iframe，每个 iframe 都有自己的 HTML 页面。这些 iframe 中的所有页面都是响应式的，因此可以根据大小进行调整。

但我想让它看起来与那些 HTML 页面在 1920x1080 分辨率屏幕中的外观完全相同（如图 2 所示）

Image 2 是在 Image 1 的第二行第一个 iframe 中加载的 HTML 页面

【问题讨论】：

标签： javascript html css iframe

【解决方案1】：

您可以将高分辨率默认设置为框架，然后将其缩放并缩小到所需的大小。

您所要做的就是计算从起始宽度到所需宽度的缩放/比例。应该是所需宽度除以起始宽度。

Source of the code with examples.

#your-frame {
  width: 1920px;
  height: 1080px;
}

#your-frame {
  zoom: 0.50;
  -moz-transform: scale(0.50);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.50);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.50);
  -webkit-transform-origin: 0 0;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  #your-frame {
    zoom: 1;
  }
}

【讨论】：

【解决方案2】：

您可能忘记将大小设置为 iframe。下面的代码帮助我没有任何问题：

CSS 代码：

div {
  width: 31%;
  height: 294px;
  margin: 0 auto;
}
iframe {
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  overflow: hidden;
  border: 0;
}

【讨论】：