Geek Answers Handbook

Invalid media requests in Android browser

I am trying to develop a web application that applies the appropriate stylesheet depending on the device (and its orientation).

I have 5 media queries:

//for mobile phones in portrait mode <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="css/mobile-portrait.css"> //for mobile phones in landscape mode <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="css/mobile-landscape.css"> //for tablets (iPad) in portrait mode <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/tablet-portrait.css"> //for tablets (iPad) in landscape mode <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/tablet-landscape.css"> //for desktop computers <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="css/desktop.css">

Everything works on a desktop computer, iPad and iPhone (both in the browser and in versions of web applications), but the request for landscape media does not work in the Android browser? Any ideas? Do I have a "max-device-width" error?

+4
source share
2 answers

This is because most of the new Android phones are about 480 wide-angle 800s high depending on the device, so as you wrote, the Android Landscape album should be selected as the css tablet landscape. But I think I had a similar problem with Android not raising the stylesheet, so I added this, and everything seemed to work ...

 <meta name="viewport" content="width=device-width">

Do you have this in your head above your style links?

+1
source

In Droid1, the viewport size is 320 x 569.

0
source

More articles:


All Articles