Home/ Questions/Q 9155575
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T12:37:13+00:00

I am testing my web application on iPad(1,2) as well as Samsung Tab 2

  • 0

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 1024×800.

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 1024×800 resolution, matches up to device-width: 600px in Portrait mode(Android Stock Browser)

    • 0