删除特定宽度的 div/iframe

Question

我想让我的网站适合移动设备，但我遇到了一个问题。 我的主页上有一个流媒体平台的播放器，通过使用 CSS 中的媒体查询，它在一定宽度上是不可见/隐藏的，但它仍然会被加载。

我想完全删除任何宽度小于 1280 像素或 768 像素的容器/iframe。

我试着摆弄一下 jquery/javascript，但它对我不起作用，我需要一些帮助：D

这是我尝试使用的：

$(window).resize(function() {
        if ($(window).width() < 1280) {
            $(container_selector).document.getElementById("video-container"){
                this.pause();
                delete(this);
                $(this).remove();
            });
            $(container_selector).empty();
        }
    });

这是我要删除的容器/iframe：

<div id="video-container"><iframe src="http://www.hitbox.tv/embed/kazuto" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

提前致谢:)

Answer 1

您可以使用media queries。

例如，像这样：

@media (max-width: 1280px) {
  #video-container {
    display: none;
  }
}

Answer 2

这是删除整个div 和内部iframe 的代码。

$(window).resize(function () {
    if ($(this).width() < 1280) {
        $("#video-container").remove();
    }
});

但是既然你在调整大小时触发它，那么窗口宽度再次增加的时候是什么时候？如果您只想在较低分辨率下隐藏 iframe 并在用户调整大小回更高分辨率时再次显示它，那么我建议使用 hide() 和 show()（或使用@Sergey Kopyrin 提出的答案）

代码示例

$(window).resize(function () {
    if ($(this).width() < 1280) {
        $("#video-container").hide();
    } else{
        $("#video-container").show();
    }
});

您还可以在这些方法中指定持续时间参数（例如 $("#video-container").hide(500) ），这样它就不会被突然隐藏。