更改分辨率时如何防止棋盘格出现？

Question

所以我目前正在从事一个需要网格/棋盘格的项目。我已经用Javascript构建了网格，并且还设法使网格居中。

我遇到的问题是，当我使用设备工具栏更改分辨率时，网格无法显示。我的目标是无论使用什么电话或计算机，都能看到整个网格。

谢谢您的帮助！

这就是我制作网格的方式。

for (i = 0; i < row; i++) {
    grid[i] = new Array(col);
}

//making a spot for every grid.
for (i = 0; i < row; i++) {
    for (j = 0; j < col; j++) {
        grid[i][j] = new Spot(i, j);
    }
}

这是我绘制网格的方式。

    function Spot(i, j) {
this.x = i;
this.y = j;

this.show = function (color) {
    fill(color);
    rect(this.x * w, this.y * h, w - 1, h - 1);

}

}

w是一个单格的宽度，h是一个单格的高度。 col和row是我希望网格具有的行和列的数量。

我还每帧都将函数称为“ this.show”。结果看起来像这样：The grid that is out of view

Answer 1

您需要检查媒体类型：

var l_strMobileMedia = '(max-width:320px)'
        var mqList = window.matchMedia(l_strMobileMedia);
        if(!mqList.matches){
            l_strMobileMedia = '(max-width:481px)'
            mqList = window.matchMedia(l_strMobileMedia);
        }   

        if(!mqList.matches){
            l_strMobileMedia = '(max-width:768px)'
            mqList = window.matchMedia(l_strMobileMedia);
        }   

        if(s_bIsMobile == null || s_bIsMobile != mqList.matches){
            Session.set_mobile_layout(mqList.matches);
        }
        s_bIsMobile = mqList.matches;
        return mqList.matches;

我希望这可以帮助您入门。如果要实时进行，则需要挂钩到窗口调整大小事件或设置一个计时器来为您执行查询。