我的一个客户在他的网站上有一个自动播放的媒体播放器,他根本不希望它在手机(或小于 640 像素的屏幕)上显示。
我不能只是将其设置为,display:none
因为它仍然会自动播放。有没有办法使用jQuery来做到这一点?
音频播放器被包裹在一个 div 中,其类为.audio
我的一个客户在他的网站上有一个自动播放的媒体播放器,他根本不希望它在手机(或小于 640 像素的屏幕)上显示。
我不能只是将其设置为,display:none
因为它仍然会自动播放。有没有办法使用jQuery来做到这一点?
音频播放器被包裹在一个 div 中,其类为.audio
使用媒体查询隐藏它,然后在它可见的情况下启动它:
@media (max-width: 640px) {
.audio {
display:none;
}
}
$( window ).load(function() {
$('#yourplayer:visible').get(0).start();
});
这有两个优点:
$(document).ready(function () {
if ($(window).width() < 640) {
$('div.audio').remove();
}
});
您还应该考虑 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();
}
}
确保 div 没有id
$(function() {
if($('body').width() < 640) {
$('div').removeClass("audio");
}
})
您可以使用 enquirejs。
enquire.register("max-width: 640px", function() {
// Remove your player here.
});