如何使我的网站适合所有屏幕尺寸？

Question

在我的网站上，我试图使 iframe 的大小在所有分辨率/屏幕尺寸上都相同。

A Iframe 在我的网站： Website查看页面源码：View-source

我试过这段代码；

<p align="center"><iframe src="" style="width: 50%; height: 50%; border: 0px; border-radius: 0px; margin-top: 20px;" id="iframe" class="myIframe"></iframe></p>
    <script type="text/javascript" language="javascript"> 
    $('.myIframe').css('height', $(window).height()+'px');
    </script>

尽管它并没有真正帮助我，因为尺寸不起作用。

Answer 1

此代码将 iframe 的宽度和高度设置为等于页面加载时视口的大小，以及每当调整 window 大小时。

<p align="center">
  <iframe src="" style="border: 0px; border-radius: 0px; margin-top: 20px;" id="iframe" class="myIframe"></iframe>
</p>

<script type="text/javascript"> 
  const iframe = document.querySelector('.myIframe');

  function setIframeSize() {
    iframe.style.width = window.innerWidth + 'px';
    iframe.style.height = window.innerHeight + 'px';
  }

  setIframeSize();

  window.addEventListener('resize', setIframeSize);
</script>

Answer 2

我会使用 flexbox。将 body 元素设置为 flex 和 p 标签。 将 p 标签设置为 flex 1 和 html，将 body 标签设置为 100% 高度和宽度。 它将扩展以填充屏幕空间。 您也不需要边框 div，只需在文本 div 本身上设置背景颜色即可。

 <html style=" height: 100%; width: 100%; "><head><link rel="icon" type="image/x-icon" href="/images/favicon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&amp;display=swap" rel="stylesheet"> <link rel="stylesheet" href="/css/style.css"> <meta charset="UTF-8"> <title>Classes</title> </head><body style="background-color: #001b2e;display: flex;height: 100%;width: 100%;margin: 0;"> <div class="text"> <embed src="/dump/text.html"> </div><p align="center" style=" flex: 1; display: flex; padding-right: 24px; "><iframe src="https://mathplayground.com/drift-boss-v3/index.html" id="iframe" height="100%" width="100%"></iframe></p> </body></html>