Question

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

我想完全删除此容器/ iframe，以获得低于1280px或768px的任何宽度。

我试图用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并在用户调整回更高分辨率时再次显示iframe，那么我建议您使用hide()和show()（或使用@Sergey Kopyrin提出的答案）

代码示例

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

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

删除特定宽度的div / iframe

2 个答案: