Question

我的导航菜单适合移动设备 - 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');
});

有没有人可以在我错的地方找到它？

Answer 1

当你尝试绑定resize处理程序时，你做错了：

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

会改善一切。您编写的代码称为“resize”函数。您需要做的是传递对函数的引用。另一个（也许更简单）的等价物是：

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

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

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

导航菜单不适合移动浏览器

1 个答案: