如果屏幕尺寸小於640像素，則刪除div

Question

我的一位客戶的網站上有一個自動播放的媒體播放器，他根本不希望它在手機（或小於640像素的屏幕）上顯示。

我不能僅將其設置為display:none因為它仍會自動播放。 有沒有辦法使用jQuery？

音頻播放器包裝在帶有.audio類的.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重新尺寸：

$(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");
    }
})