在更改分辨率时如何防止棋盘格出现在我们的视野中？

Question

所以我目前正在做一个需要 grid/checkerboard 的项目。我已经在 Javascript 中制作了我的网格，并且我还设法使我的网格居中。

我遇到的问题是，当我使用设备工具栏更改分辨率时，网格消失了。我的目标是让整个网格可见，无论我使用什么 phone 或计算机。

非常感谢你们的帮助！

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

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;

我希望这能让你开始。如果您想实时执行此操作，则需要挂钩 window 调整大小事件或设置一个计时器来为您执行查询。

在更改分辨率时如何防止棋盘格出现在我们的视野中？

How do you prevent a checkerboard getting our of view when changing the resolution?

javascript

center