CSS media queries ignored on iPhone (4S)

I'm struggling with rather strange behavior on an iPhone. Here's a very simple website I've put on a free hosting so if you have iPhone you can see for yourself: http://ainkin.bugs3.com/

Content of html is:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style.css">        
        <title>iPhoon test</title>
    </head>

    <body>

    ***some content****

    </body>
</html>

Content of CSS is:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 1000px),
@media screen and (max-device-width: 1000px) {
    body {
        background: red;
    }
}

Everywhere I look this seems like a correct HTML+CSS and it should color background red on all devices with width below 1000px, it works fine on PC, even in Chrome's device emulation of iPhone 4, but on real iPhone 4S it gets ignored and I'm seeing white page.

Can somebody please advice what should I do about it? It's a simplified example, my real code is much more complex and has multiple breakpoints, they work fine on PC, Android tablet and Windows Phone's IE but I can't get them to work on iPhone.

Solution

@media screen and (max-width: 1000px)  {
    body {
        background: red;
    }
}

@media screen and (max-device-width: 1000px) {
    body {
        background: red;
    }
}

Try separating the media queries and see if that helps.