Media Query for iPad (Landscape) Applied to Samsung Galaxy Tab 2 (Landscape) as Well

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

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)

CSS media query to target iPad and iPad only?

Finally found a solution from : Detect different device platforms using CSS

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

To reduce HTTP call, this can also be used inside you existing common CSS file:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; } /* your css rules for ipad portrait */
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}

Hope this helps.

Other references:

• https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/
  OtherStandardCSS3Features.html

Media query for iPad with min-width also applies to Android devices

Media Queries are the correct way to target the device based on screen resolution.

This answer on another nearly identical question explains it best.

https://stackoverflow.com/a/9504571/2620028

Media Query for Samsung Galaxy

I found the solution for Media Query for Samsung Galaxy off A 50 landscape .

I add:

@media only screen and (max-width: 55.75em) {
   .......................
}

betwixt

@media (min-width: 48em) and (max-width: 64em) and (orientation: landscape) {

  ....................
}

and

@media only screen and (min-width: 41.75em) and (max-width: 47.9375em) {  
 ..............
}

I was at a shopping centre and locking many Smartphone, and the majority of them can see my website gut.... I think the best solution for this problem is making smaller the difference between Media Queries on max-width.

---

Related Topics