Итак, я подумал, что закончил сайт, над которым я работал.В 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 ...