@media query looks OK but doesn't work

Did a simple test of @media queries to see what works: http://www.casedasole.it/km2014/test.html

In test.css there's a @media query that should - if I've understood media queries - change the background color from black to red on landscape tablets (1024x768). The css validates, the xhtml validates, but the background stays black in FF using Chris Pederick's Web Developer Extension -> View Responsive Layouts, and in transmog.net iPad emulator (I have no iPad).

If somebody can explain why it's not working, I'm sure I'll have fun with media queries.

Answers


First off all, these are the BEST breakpoints

 @media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
 @media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or        @ 640 wide. */ }
 @media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
 @media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
 @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
 @media (min-width:1281px) { /* hi-res laptops and desktops */ }

Now in your case, use this media query instead

 @media (max-width:1024px)  {
html, body { 
    background-color: #f00;
    color:#000;
     }
}

You need to fix your media query, using max-device-width is not valid, you can use max-width instead.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <style type="text/css">
        html, body {
            height: 100%;
            font-size: 12px;
            text-align: left;
            margin: 0;
            padding: 5px;
            background-color: #000;
            font-family: verdana,arial,geneva,helvetica,sans-serif;
            color: #fff;
            text-align: center;
        }
        /* iPad and other tablets (landscape) */
        @media screen and (max-width: 1024px) {
            html, body {
                background-color: #f00;
                color: #000;
            }
        }
    </style>
</head>
<body>
    <h1>Why is background not red in iPad landscape 1024px??</h1>
</body>
</html>

Also it seems to work if you use "@media only screen and (max-width: 1024px)"


Need Your Help

Restrict Preprocessing of Tesseract

c++ opencv ocr tesseract

I am new to tesseract library and I set it up on Ubuntu 12.04.

Will methods like POST and GET formally evolve someday?

http methods

The question may sound a bit naive or stupid, but i was wondering...will POST and GET evolve someday? What other methods exist besides those two?