CSS Grid не отображается на физических мобильных устройствах (используя React) - PullRequest
0 голосов
/ 25 августа 2018

Итак, я подумал, что закончил сайт, над которым я работал.В Chrome все работало нормально, и я протестировал все с помощью инструментов разработчика Chrome (размеры экрана для мобильных устройств и т. Д.).Но сегодня я попытался запустить его на физическом мобильном устройстве (Samsung Galaxy S8 +) и, к моему удивлению, основной компонент веб-сайта, сетка, не появляется!Я тестировал веб-сайт в разных мобильных браузерах (некоторые из которых, я уверен, они поддерживают сетки CSS), но все еще ничего.

Я использую React для этого проекта, хотя код для сетки действительно прост:

  public render() {
    return (
      <div className="App">
        /* ... Some other jsx tags that have nothing to do with the grid */
        <div className="TickerGrid">
          {this.state.tickers.map((ticker: Ticker) => <TickerCard key={ticker.symbol} ticker={ticker} />)}
        </div>
        /* ... Some other jsx tags that have nothing to do with the grid */
      </div>
    );
  }

CSS выглядит следующим образом:

.TickerGrid {
    grid-area: grid;
    margin: 10px;
    text-align: center;
    display: grid;
    grid-gap: 10px;
    justify-items: stretch;
    grid-template-columns: repeat(5, 1fr); 
}

@media (max-width: 991px) {
    .TickerGrid {
        grid-template-columns: repeat(4, 1fr);
        margin-top: 10px;
    }
}

@media (max-width: 870px) {
    .TickerGrid {
        grid-template-columns: repeat(3, 1fr);
        margin-top: 10px;
    }
}

@media (max-width: 767px) {
    .TickerGrid {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 10px;
    }
}

@media (max-width: 479px) {
    .TickerGrid {
        grid-template-columns: auto;
        margin-top: 10px;
    }
}

В div для моей сетки я использую функцию карты, чтобы заполнить сетку некоторыми элементами.Сетка должна содержать от 300 до 400 элементов, что много, но я не считаю, что это невозможно исправить.Эти элементы обновляются каждую секунду, так как я слушаю изменения с помощью веб-сокета.

У кого-нибудь есть идеи?Опять же, все работало нормально при моделировании мобильных устройств с помощью Chrome Dev Tools ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...