尝试显示可缩放网站的 iframe 时出现问题

Question

我正在尝试创建一个网站，该网站将在网站上显示一个 iframe，其侧面有一个面板。 我需要的主要内容是让 iframe 呈现网站就像在 1920px 显示器上一样，无论网站查看器使用的分辨率如何。我附上了一些快速的模型图像来尝试解释这一点，正如您所看到的，当用户拖动窗口时，iframe 网站将缩小但保持相同的宽度比例，并向外扩展，这样您就可以看到网站的更多内容在底部。 因此，如果用户使用 1368x768（如您在其他模型中看到的那样），他们仍然会看到网站如何以 1920px 呈现。

如果这令人困惑，我很抱歉，过去 2 天我一直在尝试，但我永远无法让它不断填充 iframe 所在的容器，总是有间隙，或者它无法缩放，或者恢复为平板电脑/移动版本，所有这些我都在努力避免。

有人对我有任何建议吗？我可以尝试的任何指示，非常感谢任何帮助

它在 1920x1080 显示器上的显示效果

缩小后在 1920x1080 显示器上的显示效果

1368x768 分辨率下的外观如何

在代码方面我尝试了很多东西，最“成功”的是使用js，这就是我所做的，但它没有像我喜欢的那样工作。

function adjustIframeScale() {
if (iframe && container) {
    const containerWidth = container.getBoundingClientRect().width;
    const scale = (containerWidth * 2) / 1920;
    
    iframe.style.transform = `scale(${scale})`;
    iframe.style.transformOrigin = '0 0';
    
    container.style.height = `${1080 * scale}px`;
    
    // Log values for debugging
    console.log('Scale values:', {
        containerWidth,
        scale,
        scaledHeight: 1080 * scale
    });
}

Answer 1

您可以在 iframe 上使用

zoom

CSS 属性。

您可以通过单击“运行代码片段”、“完整页面”然后调整窗口大小来尝试以下代码片段：

const $iframe = document.querySelector('iframe');

addEventListener('load', updateIframeScale);
addEventListener('resize', updateIframeScale);

function updateIframeScale() {
  const width = $iframe.getBoundingClientRect().width;
  const zoom = width / 1920;
  $iframe.style.setProperty('--zoom', zoom);
}

iframe {
  --zoom: 1;
  display: block;
  width: 100%;
  height: calc(90vh / var(--zoom));
  zoom: var(--zoom);
}

<iframe src="https://example.com/"></iframe>