iOS、AndroidのCSSグリッドレイアウト - グリッドテンプレートエリアの問題

Question

以下の簡単なコードを参照してください。コードはクロムのある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

私はあなたが反応する設計に新しいしているかどうかわかりませんが、私が始めたとき、私は同様の問題がありました。

私は自分のPC上で完全に反応するウェブサイトを持っていました。私はブラウザのサイズを変更することができ、私が望んだことをやっていた。しかし私の電話では、私は基本バージョンを持っていたので、なぜそれがメディアクエリスタイルを使用していないのか分からなかった。

は、私は私のヘッダにこれを追加するのを忘れ判明：は、自分の携帯電話であなたのサンプルを試してみました、最新のクロムとアンドロイド、正常に動作します：

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

はそれが

EDITを助け願っています！ https://jsfiddle.net/7mpkb817/