Html 自动将 iframe 调整为设备大小

Html resize iframe automatically to device size

<div  style="position:absolute; top:50px; left:0px">
        <iframe style="border: none;" src="./RedMan2.html" width="1350" height="900"></iframe>
    </div>

如何自动调整 iframe 的大小以适应设备屏幕?我刚开始学习 HTML 和 JS 和 CSS,所以如果我没有留下足够的代码,请告诉我。我才 11 岁。谢谢。

正在使用 height: 100vh; width: 100vw;

CodePen

可在此处找到更多信息:Full-screen iframe with a height of 100% :)

在大多数现代浏览器中,您可以使用 vwvh 单位,它们分别等于屏幕宽度和高度的 1%:

<div  style="position:absolute; top:50px; left:0px">
  <iframe style="border: none; width: 100vw; height: 100vh;" src="./RedMan2.html" width="1350" height="900"></iframe>
</div>

如果您的目标是旧浏览器,您可以为 iframe 及其父级 div 设置 width: 100%; height: 100%;:

<div  style="position:absolute; top:50px; left:0px; width: 100%; height: 100%;">
  <iframe style="border: none; width: 100%; height: 100%;" src="./RedMan2.html" width="1350" height="900"></iframe>
</div>