導航菜單不適用於移動瀏覽器

我有一個輕微的問題讓我的導航菜單適合移動設備 - iphone/ipad。 click here 我已經把我的CSS屬性爲以下內容：導航菜單不適用於移動瀏覽器

#wrapper{ 
    max-width: 1600px; 
    min-width: 320px; 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
} 
#header{ 
    max-width: 1018px; 
    min-width: 320px; 
    width: 100%; 
    margin: 0 auto; 
} 

#social-tabs{ 
    display: block; 
    padding: 4px; 
    margin: 5px 0px; 
} 

#nav-menu{ 
    margin: 0 auto; 
    width: 100%; 
    max-width: 1018px; 
    min-width: 320px; 
}

我也申請一個屏幕大小調整到我的網站，但我仍然沒有任何喜悅..

function reSize($target){ 
$target.css('width', $(window).width()+'px'); 
} 
$(document).ready(function(){ 
    $(window).bind('resize', reSize($('#header'))); 
    $(window).trigger('resize'); 
});

有那裏的任何人都可以拿起我要去的地方出錯？

來源

2012-08-24 NewBoy

刪除JavaScript解決方案並使用CSS媒體查詢。 – sabithpocker

啊！我試圖尋找一個捷徑 – NewBoy

如果您對媒體查詢/ css有任何具體問題，您可以問，我很樂意提供幫助。 – sabithpocker

當您嘗試調整大小處理程序綁定，你這樣做是錯誤的：

$(window).bind('resize', resize.bind(window, $('#header')));

將改善的事情。你的代碼寫成稱爲的「調整大小」功能。你需要做的是傳遞一個函數的引用。另一個（也許更簡單）的等效將是：

$(window).bind('resize', function() { resize($('#header')); });

現在說這個，你仍然會有問題。處理「調整大小」事件不會在移動設備上幫助您，因爲無論如何都不會調整大小。您真正需要做的是調查CSS Media Queries，並將您的解決方案基於CSS而不是JavaScript。

（同樣重要的一點是，在桌面瀏覽器中，由於瀏覽器窗口交互調整大小，所以「調整大小」事件會非常快速地發生，顯然，翻轉手機或平板電腦應該只觸發一個事件，筆記本電腦，瀏覽器在窗口角部件被拖動時觸發了大量的「調整大小」事件，所以更新DOM的JavaScript處理程序往往會陷入非常嚴重的困境。）

來源

2012-08-24 21:19:55 Pointy

導航菜單不適用於移動瀏覽器

回答

相關問題