CSS Grid Layout на iOS, Android - проблема с сетками-шаблонами-зонами

См. Упрощенный код ниже. Код отлично работает на рабочем столе Windows с хромом (верхний и нижний колонтитулы показывают сторону моей стороны в полноэкранном режиме, а на уменьшенном экране ниже 480 пикселей верхний колонтитул отображается под нижним колонтитулом).

But Android and iOS devices with chrome (v59) seem to ignore "grid-template-areas" altogether, and display the areas in default (html) order vertically. Is there something wrong with my code? Or is it a limitation on iOS and Android? 

.header {
  grid-area: hd;
}

.footer {
  grid-area: ft;
}

.grid {
  display: grid;
  grid-template-areas: "ft" "hd";
}

@media (min-width:440px) {
  .grid {
    grid-template-columns: 2fr 4fr 4fr;
    grid-template-areas: "hd         hd         ft"
  }
}
<div class="grid">
  <div class=header>Header</div>
  <div class=footer>Footer</div>
</div>


ios android css css-grid
person Martin    schedule 27.06.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Не знаю, новичок ли вы в адаптивном дизайне, но когда я начинал, у меня была аналогичная проблема.

У меня на компьютере был полностью адаптивный веб-сайт. Я мог изменить размер браузера, и он делал то, что я хотел. Но на моем телефоне была базовая версия, и я не понимал, почему в ней не использовались стили медиа-запросов.

Оказывается, я забыл добавить это в свой заголовок:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Надеюсь, это помогло

РЕДАКТИРОВАТЬ: Пробовал ваш образец на моем телефоне, Android с последней версией Chrome, отлично работает! https://jsfiddle.net/7mpkb817/

person Philippe    schedule 27.06.2017
comment
Спасибо! Да, он работает на моем телефоне с Android. У меня он все еще не работает в iOS, но при дальнейшем исследовании CSS Grid Layout нуждается в iOS 10.3, которая не будет работать на моих iPhone4. Придется обновить свое оборудование! - person Martin; 04.07.2017