JavaScript窗口大小调整不会在加载时触发

Question

JavaScript窗口大小调整不会在加载时触发

3

我正在使用这个特定的codepen进行工作，可以在这里找到 https://codepen.io/anon/pen/WXgvjR。虽然不是我的代码。

所有功能都很完美，但当我在移动设备上打开页面或将浏览器宽度调整为移动设备大小时，仍会显示一些项超出浏览器窗口的宽度，有没有办法检测移动设备或屏幕尺寸的变化，并只显示下方的内容？

以下是代码pen中找到的调整大小代码，如果有帮助的话：

$(window).resize(function(){
    var margin=40;
    var padding=15;
    var columns=0;
    var cWidth=300;
    var windowWidth = $(window).width();

    var overflow = false;
    while(!overflow){
        columns++;
        var WidthTheory = ((cWidth*columns)+((columns+1)*padding)+margin);
        if(WidthTheory > windowWidth)
            overflow = true;            
    }       
    if(columns > 1)
        columns--;

    var GridWidth = ((cWidth*columns)+((columns+1)*padding)+margin);

    if( GridWidth != $('#grid').width()){
        $('#grid').width(GridWidth);
    }
});

任何帮助都将不胜感激。

- user9048585

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rence · Accepted Answer

使用最大化、最小化或Chrome DevTools设备按钮等进行调整大小不会正确触发调整大小事件（它在实际调整大小之前触发，因此无法获得正确的大小）。

对于移动页面加载，请将窗口调整大小函数中的相同代码也放入文档就绪函数中（我建议将其制作为一个函数，然后在两个函数中调用该函数以减少重复代码）。

function setDisplayBoardSize()
{
    var margin=40;
    var padding=15;
    var columns=0;
    var cWidth=300;
    var windowWidth = $(window).width();

    var overflow = false;
    while(!overflow){
        columns++;
        var WidthTheory = ((cWidth*columns)+((columns+1)*padding)+margin);
        if(WidthTheory > windowWidth)
            overflow = true;            
    }       
    if(columns > 1)
        columns--;

    var GridWidth = ((cWidth*columns)+((columns+1)*padding)+margin);

    if( GridWidth != $('#grid').width()){
        $('#grid').width(GridWidth);
    }
}


$(window).resize(function()
{   
    setDisplayBoardSize();
});

$(document).ready(function()
{       
    setDisplayBoardSize();
});

关于最小值和最大值等，请参考以下stackoverflow主题：

使用浏览器最大化按钮的jQuery resize()

这个答案应该会有所帮助：

$(window).resize(function()
{   
    setTimeout(function() {
        setDisplayBoardSize();
    }, 100);
});