Quiero que el iFrame ajuste su altura a la de su documento src SOLAMENTE cuando el ancho de la ventana gráfica sea igual o inferior a 800 px.
¿Puedo implementar esto de alguna manera en una consulta de medios CSS?
¿O necesito aplicar una declaración if al script?
Solo sé un poco de html y css, así que como no programador ya investigué mucho y probé, nada funcionó hasta ahora. Un poco de ayuda sería muy apreciada.
el código del iframe:
<iframe name="iframe" class="iframe-content" id="iframe" frameborder="0" src="suchness.html"></iframe>el script para ajustar la altura del iframe a su contenido
<script> let iframe = document.querySelector("#iframe") iframe.addEventListener ('load', function() {iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';} ); </script>Puede hacer media-queries tanto en CSS como en JS. En este ejemplo, solo es realmente posible en JS, ya que está diseñando el iframe con un valor dinámico generado en 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; } }