1

我在让我的导航菜单适合移动设备 - iphone/ipad 时遇到了一个小问题。单击此处 我已将我的 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');
});

有没有人可以知道我哪里出错了？

4

1 回答 1

1

当您尝试绑定调整大小处理程序时，您做错了：

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

会改善事情。您编写的代码称为“调整大小”功能。您需要做的是传递对函数的引用。另一个（也许更简单）等价物是：

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

话虽如此，您仍然会遇到问题。在移动设备上处理“调整大小”事件不会对您有所帮助，因为无论如何都不会调整大小。您真正需要做的是调查CSS 媒体查询，并将您的解决方案基于 CSS 而不是 JavaScript。

（同样重要的是要注意，“resize”事件在桌面浏览器上会很快触发，因为浏览器窗口会以交互方式调整大小。显然，将手机或平板电脑侧放应该只触发一个事件，但在台式机/笔记本电脑上，当窗口角小部件被拖动时，浏览器会触发无数“调整大小”事件，因此更新 DOM 的 JavaScript 处理程序往往会严重陷入困境。）

于 2012-08-24T21:19:55.527 回答