スマートフォン、特に Samsung Galaxy S3 などの Android デバイス用の css メディア クエリの作成に問題があります。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />CSS メディア クエリは、デバイス幅で異なるデータを取得するようです。
content="width=device-widthGalaxy S3 をポートレート モードで保持すると、画面は 720 x 1280 になり、メタ ビューポートからは同じ幅になっているように見えます。
しかし、同じページをランドスケープ モードで見るとcontent="width=device-width、メタ ビューポートから見ると、より大きなサイズのメディア クエリを聞いているときに、いわば 1280 というように、まだ 720 の幅が与えられているように見えます。
これにより、おそらく 720 が最大幅であると考えられるため、Web ページが多少ズームされたビューで読み込まれます。
画面の確認:
Galaxy S3 ポートレート (クローム)
Galaxy S3 ランドスケープ (クローム)
上記は、Chrome ブラウザを搭載した Samsung Galaxy S3 でテストされました。
私は同様の問題を抱えていますが、実際には「インターネット」と呼ばれるデフォルトの Android ブラウザでさらに悪化しています。ビューポートをリッスンしている間、すべての CSS メディア クエリを無視しているようです。
チェック画面：
Galaxy S3 ポートレート (デフォルト)
