媒体查询为iPad(横向)施加到三星Galaxy Tab 2(横向),以及(Media Query

2019-07-17 23:14发布

我正在测试iPad(1,2)我的web应用程序,以及三星电子标签2。 我有不同组的CSS( 外部 )的要应用于iPad上横向/纵向模式和横向/纵向模式上标签2。

但我不能写一个正确的媒体查询的选项卡2出乎我的喜好,以应用于iPad的景观应用于标签2的风景模式以及CSS的!

这是我曾尝试:

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

注:我。 根据规格的三星标签2的分辨率是1024x800。

II。 我不能使用min-device-pixel-ratio : 1为标签2作为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" />

原来,三星标签2(P3100),其拥有1024x800的分辨率,相匹配到device-width: 600px在人像模式(Android的库存浏览器



文章来源: Media Query for iPad (Landscape) applied to Samsung Galaxy Tab 2 (Landscape) as well