css - 携帯電話がメディアクエリを認識しない

Question

興味深い苦境があります。レスポンシブサイトで作業しています。ブラウザのサイズを変更すると、すべてが正常に機能しますが、iPhoneからサイトを表示すると、適切なメディアクエリからクエリが取得されません。次のように定義されています：

@media (max-width: 479px) {
  rules
}

サイトはericbrockmanwebsites.com/dev2です。これまでに誰かがこれに遭遇したことがあるかどうか疑問に思います。

どんな助けでも大歓迎です。

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1">モバイル デバイスがメディア クエリを尊重するようにするには、head に含める必要があります。

Answer 2

特定のケースでは、画像がモバイルの本文またはページ ラッパーの幅を超えて拡張されている場合、単純に

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

頭の中心に体を調整できます。