針對Mobile + CSS類的jQuery？

我目前使用下面從包含.iframe-NAV某些頁面針對Mobile + CSS類的jQuery？

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

刪除我的頭這個偉大的工程。我的問題是，我有其他頁面包含「.iframe1」，不受該腳本的影響，並且因爲在移動設備上顯示不正確。我需要兩個單獨的CSS類，原因是我現在不會進入。

有沒有辦法從包含.iframe1網頁，以及從我的移動網站@mobile只有屏幕上刪除＃主標題和（最大寬度：767px）？

我嘗試了以下測試從所有移動頁面（作爲測試）中刪除#main-header，但未成功。我還有很多東西需要學習...... 沒有工作：

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

非常感謝提前。

來源

2015-10-06 SnaFubar

你怎麼測試呢？你使用的是桌面瀏覽器，只是調整窗口大小？另外http://caniuse.com/#search=matchMedia只是IE10 +你在IE9中測試嗎？ – NullHappens

我在iPhone上使用Safari來測試這些移動卡住。通常用於桌面測試的Chrome或Safari。（osx） – SnaFubar

我會建議把你的邏輯到$(window).on("resize"塊如下：

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

來源

2015-10-06 04:50:46 vijayP

嘿@vijayP，你的解決方案讓我在那裏分道揚part。但我遇到兩個問題： 1-我仍然需要在腳本中額外定位.iframe1類，以便僅阻止具有該類的頁面在移動設備上顯示導航。 2-腳本正在成功從移動網站中刪除#main-header，但只有在滾動已激活之後。這可能與我的wordpress高級主題的響應式斷點有關。如果你認爲你可以幫助這個，我可以PM你我的CSS等任何額外的幫助將不勝感激，謝謝！ – SnaFubar

針對Mobile + CSS類的jQuery？

回答

相關問題