android @media query width issue

Question

I read a nice article on @media queries and now I'm trying to use them to format my site based on the browser width. When I test on my Android phone (Android 4.0 browser) it seems to be giving a width of 800 pixels when the actual width is 480. 800 would be the width if the phone is rotated landscape. What is the right way to detect the current width in CSS?

The CSS I used for testing:

@media all and (max-width: 800px) {
    div.testit800 {
    display: block;
    }
}

@media all and (max-width: 799px) {
    div.testit799 {
    display: block;
    }
}

@media all and (max-width: 768px) {
    div.testit768 {
    display: block;
    }
}

The HTML:

<div class="testit800">
    max width 800
</div>
<div class="testit799">
    max width 799
</div>
<div class="testit768">
    max width 768
</div>

The Android always shows: max width 800 regardless of the orientation.

Update: I found this page that demonstrates several javascript ways of detecting width. window.outerWidth seems to work for Android. Would it be generally reliable across devices and browsers? I realize I would would have to give up on the @media queries to use it.

possible duplicate of [CSS3 media queries not working](http://stackoverflow.com/questions/7859336/css3-media-queries-not-working) — cimmanon, Aug 19 '13 at 19:02
I did read that one and am using the suggested , but that doesn't change my result. — George, Aug 19 '13 at 19:09

score 0 · Answer 1 · answered Aug 19 '13 at 19:16

I guess you're doing it the right way, but as your code shows, you don't have any @media for width 480px.

@media all and (min-width: 480px) and (max-width: 599px)
{
}

This code will take the pixels range from 480(minimum) to 599(maximum). Should work.

My advice is to always use percentage and not px, as percentage will fix to the screen size and pixels are fixed.

android @media query width issue

1 Answers1