How do I make my website fit all screen sizes?-CodePudding

On my website, I was trying to make the size of an iframe be the same on all resolutions / screen sizes.

A Iframe on my website: Website View source of the page: View-source

I tried this code;

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

although it didn't really help me that much as the size didn't work.

CodePudding user response：

This code sets the width and height of the iframe to be equal to the size of the viewport when the page loads, and whenever the window is resized.

<p align="center">
  <iframe src="" style="border: 0px; border-radius: 0px; margin-top: 20px;" id="iframe" ></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>

CodePudding user response：

I would use flexbox. Set the body element to be flex and the p tag. Set the p tag to flex 1 and html and body tags to 100% height and width. It will expand to fill the screen space. You also dont need the border div, just set the background color on the text div itself.

<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 >
<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>