Web サイトでメディア クエリを使用して、次の代替コンテンツを配信しています。
• iPad 2、3、および 4
• iPhone 3、4、および 5
• アンドロイド
私のcssコードは次のとおりです。
@media screen and (min-width: 480px) and (max-width: 900px) {
/* Content for ipad */
}
@media only screen and (max-width: 480px){
/* Content for iphone */
}
上記の css メディア クエリを使用すると、iPad と iPhone のすべてのフレーバーで完全に機能します。ただし、400x800 の高解像度画面を使用する Android デバイスについては混乱しています。Android 400x800 で得られる結果は、ポートレート モードで表示すると完璧な結果が得られるが、ランドスケープ モードで表示すると iPad のコンテンツが取得されるということです。したがって、400x800 Android デバイスは、ランドスケープ モードで iPad メディア クエリをキャッチしています。 ..だから私の質問は次のとおりです。
- Android 400x800 を正常にターゲットにするにはどうすればよいですか (まだ iPad メディア クエリを使用しています)。
- また、標準解像度の Android デバイスをターゲットにする方法 (iPhone メディア クエリで十分ですか) を教えてください。