In JS can I use an if-statement for substituting a css media query?

Question

I want the iFrame to adjust its height to that of its src document ONLY when the viewport-width is equal or less than 800px.

Can I somehow implement this into a CSS media query?

Or do I need to apply an if-statement to the script?

I only know a little html and css, so as a non-programmer I already did a lot of research and try, nothing worked 'til now. A little help would be much appreciated.

the iframe code:

<iframe name="iframe" class="iframe-content" id="iframe" frameborder="0" src="suchness.html"></iframe>

the script for adjusting the iframe height to its content

<script>
    
let iframe = document.querySelector("#iframe")
         
iframe.addEventListener
('load', function() 
{iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';}
);  

</script>

Answer 1

You can do media-queries in both CSS and JS. In this example it is only really possible in JS, as you are styling the iframe with a dynamic value generated in JS.

const breakpoint = window.matchMedia("(max-width: 800px)");
if (breakpoint.matches) {
  // code to be executed
}

@media only screen and (max-width: 800px) {
  .element {
    color: red;
  }
}