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

【问题标题】：How to Hide Iframe if web browser size is reduced or in windowed mode如果 Web 浏览器大小减小或处于窗口模式，如何隐藏 iframe
【发布时间】：2021-12-06 22:03:03
【问题描述】：

如果屏幕尺寸小于 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>

【问题讨论】：

使用Media Query或window.addEventListener("resize", () => {...});，设置display: none
感谢您的回复，对不起，我是编码新手，我将 window.addeventlistener 放在我的代码中的什么位置以及如何将尺寸放在哪里？（下面是我添加它的方法，但它似乎是正确的） window.addEventListener("resize", () => {1000,800});, 设置显示：无
你可以尝试使用这个css............ @media only screen and (max-width: 600px) { .v-tour-object { display: none; } }
在script block中使用它：
仍然显示白线并显示视频。 youtube.com/embed/tgbNymZ7vqY" > <style> @media only screen and (max-width: 600px) { .v-tour-object { display: none; } } </style>

标签： javascript php html wordpress iframe

【解决方案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;
    }
}

【讨论】：