そのため、古いモバイル ブラウザーの大部分ではメディア クエリがサポートされていないことがわかりました。(出典: レスポンシブ デザインを実装する本)。たとえば、この本では、Android ユーザーの 92% が Android v2.3 以前を使用してブラウジングしていると書かれています。現在のバージョンは v4.x です。
そのため、それらのユーザー向けに最適化する方法に興味があります。<meta name=”viewport” content=”width=device-width” />これらのブラウザは次のメディアクエリを理解しないため、「デスクトップ」レイアウトのごく一部を表示するだけではありませんか (デフォルトの 960px レイアウトの 200px など?) 。
したがって、デバイスがメディアクエリをサポートしていない場合、ビューポートメタタグを削除して、少なくとも古いブラウザーでデフォルトのデスクトップエクスペリエンスを利用できるようにする方法があるかどうか疑問に思っています。何か提案はありますか? ありがとう。
あなたの本は古くなっています。最新情報については、こちらの表を参照してください。
簡単にまとめると、Android ユーザーの 5.5% が 2.3 未満でブラウジングしています (2.3 の最初のパッチを数えると 5.6%)。
2.3 のパッチの後、これらの携帯電話のブラウザーはかなりまともです。これはすべての Android 携帯ユーザーの 94.4% をカバーするため、それ以上をターゲットにします。
また、このチャートをここで確認すると、実際の css メディア クエリのサポートが Android ブラウザー 2.1 にまでさかのぼることがわかります。(これは、Android のユーザーの 99.9% が基本的なメディア クエリを表示できることを意味します)
また、これらのレポートを見ると、次のようになります。
少なくとも 2.2 までは、指定したメタ タグ<meta name=”viewport” content=”width=device-width” />がサポートされていることがわかります (メディア クエリは 2.1 でサポートされているため、メタ タグもサポートされていると思いますが、まだユーザーの 98.2% をカバーしていません)。
最後の数パーセントの努力を本当にやりたい場合は、javascript を使用して、メディア クエリがサポートされているかどうかを検出できます。個人的にはmodernizerのようなライブラリをチェックアウトします。その道を歩むことを選択すれば、あなたの人生はずっとシンプルになります。