Search code examples
cssmedia-queries

Media Query for iPad (Landscape) applied to Samsung Galaxy Tab 2 (Landscape) as well

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.

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!

Here is what I have tried:

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

NOTE: i. According to the specs the resolution of Samsung Tab 2 is 1024x800.

ii. I cannot use min-device-pixel-ratio : 1 for Tab 2 as iPad(1) too has the same values.

Solution

  • Finally this is how I achieved it:

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

    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)