2

我正在iPad(1,2)和Samsung Tab 2上测试我的网络应用程序。我有不同的 CSS（外部）集应用于 iPad 上的横向/纵向模式和选项卡 2 上的横向/纵向模式。

但是我无法为 Tab 2 编写正确的媒体查询。与我的喜好相反，应用于 iPad Landscape 的 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" />

注意：一。根据规格，三星 Tab 2 的分辨率为 1024x800。

ii. 我不能min-device-pixel-ratio : 1用于 Tab 2，因为 iPad(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 分辨率的三星 Tab 2(P3100)device-width: 600px在人像模式下匹配（Android Stock Browser）

于 2013-01-21T09:11:36.043 回答