CODEWITHSUNDEEP
cssgoogle-chromeresponsive-designmedia-queries
Spero
Spero

Reputation: 288

@media rule behaving oddly in Chrome responsive design mode

Here is a simple HTML page that uses multiple @media rules: 

<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <style type="text/css">
        .div1{
            height: 100vh;
            width: 100vw;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            background-color: blue;
        }
        @media only screen and (max-width: 700px) and (min-width: 500px) {
            .div1{
                background-color: green;
            }
        }
        @media only screen and (max-width: 499px) and (min-width: 300px) {
            .div1{
                background-color: red;
            }
        }
        @media only screen and (max-width: 299px)  {
            .div1{
                background-color: yellow;
            }
        }

    </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

This page should change its colour as the window becomes smaller. It works as intended if I manually resize the web browser window. It also works under Firefox. However, it fails to work properly under Chrome's responsive design mode [Version 69.0.3497.100 (Official Build) (64-bit)]

Strangely enough, the CSS behaves as expected under Chrome's responsive design mode when I recreated it in JSFiddle here: http://jsfiddle.net/7g5jca8x/13/

What is the difference between the JSFiddle version and the HTML version? I can't figure this out.

Upvotes: 0

Views: 351

Answers (1)

dippas
dippas

Reputation: 60563

You were missing the viewport meta tag here is an example

<meta name="viewport" content="width=device-width, initial-scale=1">

Upvotes: 1

Related Questions