Question

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

我无法将其设置为display:none，因为它仍会自动播放。有没有办法用jQuery做到这一点？

音频播放器包含在一个类.audio

的div中

Answer 1

使用media queries隐藏它，然后启动它，只要它可见：

@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 dimension：

$(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

您可以使用enquirejs。

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

Answer 5

确保div没有 id

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

如果屏幕尺寸小于640px，请删除div

5 个答案: