Question

I have created a stylesheet for mobile devices. Im loading it with this:

<link rel="stylesheet" media="handheld, screen and (max-width: 650px)" href="/mobile.css?t=<?php echo rand(); ?>" />

inside that file I have:

@media handheld, screen and (max-width: 650px) {
     -- Styles here
}

@media handheld, screen and (max-width: 446px) {
     -- Styles here
}

It works when i resize browser, but for some reason at least on android i see the normal web, any idea?

Answer 1

There are a number of reasons why this may be happening:

1. Your Android doesn’t support media queries. There are a handful of Android devices out there that don’t recognize media queries, your droid may be one of them.

2. Your media query is not being interpreted how you think it’s being interpreted. Are you looking for “handheld, (screen and max-width: 650px)”, or does it have to be a handheld screen with a max-width of 650px? If you’re expecting the first, you might actually be getting the latter. If that’s the case, then you probably won’t ever trigger that code, because very few smartphones register themselves as “handheld.”

3. Your screen width is not what you think it is. Just because you have a screen that is 1.5″ by 3″, it doesn’t mean your resolution tops out at 650px or even 446px. Thanks to the high densities that these smartphones can achieve, your droid may actually have a high resolution than your desktop monitor. The iPhone5, for example, would only read your first query and only in portrait mode, because its smallest side is 640px, with the longer side being 1136px. The largest that the Android OS supports is a whopping 2560×1600 resolution!)