Question

我正在处理一个特定的codepen，可以在这里找到https://codepen.io/anon/pen/WXgvjR ..它不是我的。

一切都很完美，除非我在手机上打开页面或将浏览器宽度更改为移动大小，它仍然显示浏览器窗口宽度以外的一些项目，有没有办法检测移动或更改在屏幕尺寸，只是显示它们下降？

以下是codepen中的调整大小代码，如果有帮助的话

$(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);
    }
});

非常感谢任何帮助

Answer 1

使用最大化，最小化或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();
});

对于min-max等，请参阅此stackoverflow线程：

jQuery resize() using browser maximise button

这个答案特别有用：

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

Javascript窗口调整大小而不是触发onload

1 个答案: