Question

请参阅下面的简化代码。代码在带有chrome的Windows桌面上工作正常（页眉和页脚在我的全屏显示侧面，在480px以下的缩小屏幕上，标题显示在页脚下方）。

但是带有chrome（v59）的Android和iOS设备似乎完全忽略了“网格模板区域”，并以垂直方式显示默认（html）顺序的区域。我的代码有问题吗？或者它是iOS和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>

Answer 1

我不知道你是否对响应式设计不熟悉，但是当我开始时我遇到了类似的问题。

我的电脑上有一个完全响应的网站。我可以调整浏览器的大小，它正在做我想要的。但在我的手机上，我有基本版本，我不明白为什么它没有使用媒体查询样式。

原来我忘了把它添加到我的标题中：

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

希望有所帮助

编辑：在我的手机上尝试过您的样品，使用最新的Chrome安卓，效果很好！ https://jsfiddle.net/7mpkb817/

iOS，Android上的CSS网格布局 - 网格模板区域的问题

1 个答案: