jquery - 如果屏幕尺寸小于 640 像素，则删除 div

Question

我的一个客户在他的网站上有一个自动播放的媒体播放器，他根本不希望它在手机（或小于 640 像素的屏幕）上显示。

我不能只是将其设置为，display:none因为它仍然会自动播放。有没有办法使用jQuery来做到这一点？

音频播放器被包裹在一个 div 中，其类为.audio

Answer 1

使用媒体查询隐藏它，然后在它可见的情况下启动它：

@media (max-width: 640px) {
      .audio {
         display:none;
      }
}

$( window ).load(function() {
    $('#yourplayer:visible').get(0).start();
});

这有两个优点：

• 它将代码与大小和表示逻辑分开
• 您可能还有其他与尺寸相关的内容，它们被隐藏/调整在同一个地方

Answer 2

$(document).ready(function () {
    if ($(window).width() < 640) {
        $('div.audio').remove();
    }
});

Answer 3

您还应该考虑 windows re 尺寸：

$(document).ready(function () {
   changeElements();

    $(window).resize(function() {
        changeElements();
    });
});

function changeElements(){    
     if ($(window).width() <= 640) {
        $('#divId').hide();
        $('#divId').get(0).pause();
    }else{
        $('#divId').show();
        $('#divId').get(0).play();
    }
}

Answer 4

确保 div 没有id

$(function() {
    if($('body').width() < 640) {
        $('div').removeClass("audio");
    }
})

Answer 5

您可以使用 enquirejs。

enquire.register("max-width: 640px", function() {
  // Remove your player here.
});