@media 规则在 Chrome 响应式设计模式下表现异常答案

【问题标题】：@media rule behaving oddly in Chrome responsive design mode@media 规则在 Chrome 响应式设计模式下表现异常
【发布时间】：2019-02-23 01:31:52
【问题描述】：

这是一个使用多个@media 规则的简单 HTML 页面：

<!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>

随着窗口变小，该页面的颜色应该会改变。如果我手动调整 Web 浏览器窗口的大小，它会按预期工作。它也可以在 Firefox 下运行。但是，在 Chrome 的响应式设计模式下无法正常工作 [Version 69.0.3497.100 (Official Build) (64-bit)]

奇怪的是，当我在 JSFiddle 中重新创建 CSS 时，在 Chrome 的响应式设计模式下，CSS 的行为与预期的一样：http://jsfiddle.net/7g5jca8x/13/

JSFiddle 版本和 HTML 版本有什么区别？我想不通。

【问题讨论】：

为什么要添加低于 299px 的查询？ 320px 下没有设备 ;)
@dippas 这只是一个测试。不是真正的代码。
您缺少元标记视口，
@dippas 您能否将您的回复作为答案，以便我将其标记为解决方案？奇怪的是，JSFiddle 将元视口标签作为其网页设计的一部分，即使它根本无法扩展到移动设备。我需要为 CSS 东西找到更可靠的小提琴。

标签： css google-chrome responsive-design media-queries

【解决方案1】：

你错过了viewport meta tag 这是一个例子

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

【讨论】：