0

All I want to do is have a desktop-specific version, and then a mobile version that works on an iPhone, Android, iPad, and any other handheld device.

What I have right now to detect desktop is:

@media only screen and (min-device-width: 960px) {

And I have this to detect for mobile:

@media only screen and (max-device-width: 959px) {

However, when my Android (Galaxy S3) is in landscape mode, it doesn't load the correct version. How can I differentiate between desktop and an android in landscape mode? I've tried a bunch of different widths and other combinations of code, however nothing has worked for me. (The closest I've gotten is loading both the desktop and mobile version on the Android in landscape mode.)

Would anyone have any advice for this?

user1801486
  • 81
  • 4

2 Answers2

1

Have you tried width in cm/mm?

@media all and (min-width: 25cm)
{

}
Tishka17
  • 305
  • 2
  • 12
  • Thank you! This worked for me. I used: "media only screen and (min-device-width: 340mm)" for the desktop version, and then I used "media only screen and (max-device-width: 339mm)" for mobile, which worked for android in landscape, android in portrait, iPhone in landscape, and iPhone in portrait. Thank you! – user1801486 Aug 15 '13 at 12:00
0

Have you tried orientation?

@media all and (orientation:landscape)
{
    /* Your code here */
}
Jari Thorup Palo
  • 519
  • 1
  • 6
  • 17