css - 适用于 iPad(横向)的媒体查询也适用于 Samsung Galaxy Tab 2(横向)

Question

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

但我无法为 Tab 2 编写正确的媒体查询。与我的喜好相反，应用于 iPad Landscape 的 CSS 也应用于 Tab 2 的 Landscape 模式!

这是我尝试过的:

<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" />

注意: 根据规范，Samsung Tab 2 的分辨率为 1024x800。

二。 我不能对 Tab 2 使用 min-device-pixel-ratio : 1，因为 iPad(1) 也有相同的值。

Answer 1

最后我是这样实现的:

<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)