导航菜单不适用于移动浏览器

我有一个轻微的问题让我的导航菜单适合移动设备 - 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

导航菜单不适用于移动浏览器

回答

相关问题