使用 Modernizr 和 Zepto 时 window.resize 失败答案

【问题标题】：window.resize fail when using Modernizr and Zepto使用 Modernizr 和 Zepto 时 window.resize 失败
【发布时间】：2012-03-22 12:47:35
【问题描述】：

我在使用 JavaScript 和 Zepto 库调整元素大小时遇到问题。当页面加载时，元素获取窗口宽度和高度就好了。我还使用 alert() 测试了我的 window.resize 并且效果也很好。当我尝试在窗口更改大小时调整元素大小时，就会出现我的问题。这是我通过 Modernizr 加载的 JavaScript：

$(document).ready(function()
{
    setTimeout(function(){
        window.scrollTo(0, 1);
    }, 0);

    var navConfig = 
    {
        winWidth        : $(window).width(),
        winHeight       : $(window).height(),
        primaryNav      : $('#primaryNav'),
        openPrimaryNav  : $('#openPrimaryNav'),
        closePrimaryNav : $('#closePrimaryNav')
    }

    function sizePrimaryNavigation()
    {
        navConfig.primaryNav.css(
        {
            'height'    : navConfig.winHeight - 5,
            'width'     : navConfig.winWidth - 20
        });
    }

    function primaryNavigation()
    {   
        navConfig.openPrimaryNav.bind('click', function()
        {
            navConfig.primaryNav.addClass('open');
        });

        navConfig.closePrimaryNav.bind('click', function()
        {
            navConfig.primaryNav.removeClass('open');
        }); 
    }

    sizePrimaryNavigation();

    primaryNavigation();

    window.onresize = sizePrimaryNavigation;
});

我还设置了一个工作演示 - http://jsfiddle.net/nicklansdell/DWbNS/2/ 单击演示上的菜单按钮以获取我要调整大小的元素。

谁能告诉我我做错了什么吗？非常感谢。

【问题讨论】：

您是否尝试绑定到 onresize 事件？像 $(window).bind('onresize', function(event){});
嗨。是的，我也尝试过，但没有成功。

标签： javascript resize window modernizr zepto

【解决方案1】：

我检查了，这样写函数，它会工作的。演示在这里

http://jsfiddle.net/DWbNS/7/

http://jsfiddle.net/DWbNS/9/

顺便说一句，zepto doc 说“绑定”是“已弃用，改用 on”。

function sizePrimaryNavigation()
{
    navConfig.primaryNav.css(
    {
        'height'     : win.width() - 5,
        'width'        : win.height() - 20
    });

}
$(window).resize(sizePrimaryNavigation);
// window.onresize = sizePrimaryNavigation;
// will work too

【讨论】：

【解决方案2】：

您将 onresize 属性分配给 jQuery 对象 ($(window))。您必须改为将其分配给 window.onresize。

【讨论】：

Kolink 感谢您的回复我已经更新了我的代码，但它仍然无法正常工作。我已经反映了上面示例和演示中的更改。另外我没有使用 jQuery，我使用的是 Zepto
不要使用function foo() 语法，而是尝试var foo = function()。
恐怕不行。如果您对 sizePrimaryNavigation() 进行初始调用，则在小提琴上打开菜单，然后调整窗口大小，您将看到它确实执行了一次，但只执行一次。据我所知，它应该无限期地调整大小。
将navConfig 的内容移到sizePrimaryNavigation() 函数中。需要根据更新后的窗口大小重新计算。
又不行了。我之前在 jQuery 中使用过这种精确的模式，它的工作没有问题。我不明白。