Как вы препятствуете тому, чтобы шахматная доска становилась нашей при изменении разрешения? - PullRequest
Новая
       19

Как вы препятствуете тому, чтобы шахматная доска становилась нашей при изменении разрешения?

1 голос
/ 25 октября 2019

Итак, я сейчас работаю над проектом, который требует сетки / шахматной доски. Я уже сделал свою сетку в 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" для каждого кадра. Результат выглядит так: Сетка вне поля зрения

1 Ответ

1 голос
/ 26 октября 2019

вам нужно проверить тип носителя: 

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;

Надеюсь, это поможет вам начать. Если вы хотите сделать это в реальном времени, вам нужно подключиться к событию изменения размера окна или установить таймер, который выполняет запросы за вас.

...