iPad的媒体查询（横向）应用于三星Galaxy Tab 2（横向）以及 [英] Media Query for iPad (Landscape) applied to Samsung Galaxy Tab 2 (Landscape) as well

问题描述

我在 iPad（1,2）以及三星Tab 2 上测试我的网络应用程序。我有不同的CSS集合（外部），适用于iPad上的横向/肖像模式和标签2上的横向/纵向模式。

I am testing my web application on iPad(1,2) as well as Samsung Tab 2. I have got different sets of CSS(external) to be applied for Landscape/Portrait mode on iPad and Landscape/Portrait mode on Tab 2.

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

But I am unable to write a correct media query for the Tab 2. Contrary to my liking, the CSS to be applied for iPad Landscape is applied to Landscape mode of Tab 2 as well!

这里是我试过的：

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

ii。

推荐答案

最后，这是我实现的：

<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）在肖像模式下（ Android库浏览器）

Turns out that the Samsung Tab 2(P3100) which boasts of 1024x800 resolution, matches up to device-width: 600px in Portrait mode(Android Stock Browser)

这篇关于iPad的媒体查询（横向）应用于三星Galaxy Tab 2（横向）以及的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！