2

iPad(1,2)とSamsung Tab 2で Web アプリケーションをテストしています。iPad のランドスケープ/ポートレート モードとタブ 2 のランドスケープ/ポートレート モードに適用するCSS(外部) の異なるセットがあります。

しかし、Tab 2 の正しいメディアクエリを書くことができません。私の好みに反して、iPad の横向きに適用される CSS が、Tab 2 の横向きモードにも適用されます!

これが私が試したことです：

<link rel="Stylesheet" type="text/css" media="only screen and (min-device-width : 600px) and (max-device-width : 1024px) and (orientation : landscape)"
    href="CSS/TabLandscape.css" />
<link rel="Stylesheet" type="text/css" media="only screen and (min-device-width : 600px) and (max-device-width : 1024px) and (orientation : portrait)"
    href="CSS/TabPortrait.css" />
<link rel="Stylesheet" type="text/css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)"
    href="CSS/iPadLandscape.css" />
<link rel="Stylesheet" type="text/css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)"
    href="CSS/iPadPortrait.css" />

注: i. 仕様によると、Samsung Tab 2 の解像度は 1024x800 です。

ii. iPad(1) も同じ値を持っているため、Tab 2 には使用できません。min-device-pixel-ratio : 1

4

1 に答える 1

3

最後に、これは私がそれを達成した方法です:

<link rel="Stylesheet" type="text/css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)"
    href="CSS/iPadLandscape.css" />
<link rel="Stylesheet" type="text/css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)"
    href="CSS/iPadPortrait.css" />
<link rel="Stylesheet" type="text/css" media="only screen and (device-width : 1024px) and (orientation : landscape)"
    href="CSS/TabLandscape.css" />
<link rel="Stylesheet" type="text/css" media="only screen and (device-width : 600px) and (orientation : portrait)"
    href="CSS/TabPortrait.css" />

1024x800 の解像度を誇る Samsung Tab 2(P3100) はdevice-width: 600px、ポートレート モード ( Android Stock Browser )で一致することが判明しました。

于 2013-01-21T09:11:36.043 に答える