javascript - 针对 Mobile + CSS 类的 jQuery？

Question

我目前正在使用以下方法从某些包含 .iframe-nav 的页面中删除我的标题

$( document ).ready(function() {
 if($(".iframe-nav").length > 0) // If .iframe-nav exists
    $("#main-header").hide(); // Hide #main-header
});

这很好用。我的问题是我有其他页面包含不受该脚本影响的“.iframe1”，因此在移动设备上显示不正确。由于我现在不会讨论的原因，我需要两个单独的 CSS 类。

有没有办法从包含 .iframe1 的页面以及我的移动网站@mobile only screen and (max-width: 767px)？

我尝试了以下方法来测试从所有移动页面中删除#main-header(作为测试)，但没有成功。我还有很多东西要学... 无效:

$( document ).ready(function() {
 if (matchMedia('only screen and (max-width: 767px)').matches) {
   $("#main-header").hide(); // Hide #main-header
}

非常感谢。

Answer 1

我建议将逻辑放入 $(window).on("resize" block 中，如下所示:

$(window).on("resize", function (e) {
    var newWindowWidth = $(window).width();
    if(newWindowWidth < 767) //check for width
    {
       $("#main-header").hide();
    }
});