私の研究によると、新しいスマートフォンのポートレート解像度は最大800px
タブレット最小ポートレート解像度600px
現在、メディアクエリを使用して、最大800ピクセルの解像度をサポートするハンドヘルドデバイスにモバイルCSSをレンダリングしようとしていますが、問題は、768ピクセルのポートレート解像度のipad1などの古いタブレットでもモバイルCSSがレンダリングされることです。
600px以上のタブレットとデスクトップPCがワイドスクリーンCSSをレンダリングし、最大ポートレート解像度が800pxの携帯電話がモバイルCSSをレンダリングするようにする必要があります。
モバイルとタブレットの幅が交差しているにもかかわらず、どうすればこれを行うことができますか？
これが私の現在の設定です...
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,
user-scalable=0,width=device-width" />
<link rel="stylesheet" media="screen and (max-device-width: 800px)"
href="/css/mobile.css" />
<link rel="stylesheet" media="screen and (min-device-width: 600px)"
href="/css/widescreen.css" />
事前にオマールに感謝します。
アップデート：
次の2in1メディアクエリは、私の目的に合っているようです。私はサムスンギャラクシーS2、グーグルネクサスとiphone4でテストしました、そしてそれはうまく働いているようです。タブレットを確認する必要があります。
<link rel="stylesheet" type="text/css" media='only screen and (max-width:480px) and
(orientation: portrait), only screen and (max-width:800px) and (orientation:
landscape)' href="mobile.css" />