javascript - 如果 Web 浏览器大小减小或处于窗口模式，如何隐藏 iframe

Question

如果屏幕尺寸小于 IFrame 的宽度，我正在尝试隐藏 Iframe。现在，如果我使用的是小型笔记本电脑，网站的一侧有一条白线（见下图），如果屏幕尺寸或网络浏览器太小，我只想隐藏 iframe。

这是我的代码，它似乎适用于移动设备，但是当我调整网络浏览器的大小时，它并没有隐藏。

       <iframe embed class="v-tour-object" style=position:absolute;left:700px;top:0px; width="550" height="360"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

<script>
 if(window.innerWidth <= 1000 && window.innerHeight <= 800) {
   document.querySelector('.v-tour-object').style.display = "none"
}
</script> 

标签： javascriptphphtmlwordpressiframe

Answer 1

你应该处理window resize事件

或者

CSSMedia Query

window.addEventListener("resize", () => {
    const h = window.innerHeight;

    if (h < 920) document.querySelector(".v-tour-object").style.display = "none";
});

CSS

@media only screen and (max-height: 920px) {
    .v-tour-object {
        didplay: none;
    }
}