simple css media queries not working

Question

The following web page displays correctly on desktop but I can't figure out why it's not working on a android phone(the color of the text is always blue):

<html>
    <head>
        <style type="text/css">
            @media screen { body { color: blue; } }
            @media handheld { body { color: red; } }
        </style>
    </head>
    <body>
        This is a test!
    </body>
</html>

Tested on:

Android: 4.0.4
Standard android web browser: 4.0.4-S7562XXALJ4
Chrome: 25.0.1364.169
Firefox: 19.0.2

On all the mobile browsers the option to display web page as on computer screen has been disabled. The online web pages that use media queries work correctly.

I've also tried only screen/not screen pair and it still does not work.

Thanks!

Answer 1

Try by targeting the view port size

@media screen { body { color: blue; } }
@media only screen 
    and (max-width : 420px) { 
    /* Styles */
    body { color: red; }
}

Modify the "max-width" according your targeted device view port

simple css media queries not working

Question

1 answers

solution1
0 ACCPTED 2013-03-13 08:39:01

simple css media queries not working

Question

1 answers

solution1 0 ACCPTED 2013-03-13 08:39:01

solution1
0 ACCPTED 2013-03-13 08:39:01