Chrome设备模式仿真媒体查询不起作用

94

由于某种原因，设备仿真模式无法读取我的媒体查询。它可以在其他网站上使用，包括我使用引导程序创建的自己的网站，但不适用于我从头开始使用的媒体查询（单击媒体查询按钮会将按钮变为蓝色，但不会显示任何媒体查询）。测试文件如下。这是Chrome中的错误，还是我的文件需要更改？

<!DOCTYPE html>
<!--
Media Queries Example 1
Sam Scott, Fall 2014
-->
<html>
<head>
    <title>MQ Example 1</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { font-family: sans-serif; }
        h1 { color: red; } 
        h2 { color:blue; }
        p { color:green; }

        @media (max-width: 768px) and (min-width: 481px) {
            h1 { color: green; } 
            h2 { color:red; }
            p { color:blue; }
        }

        @media (max-width:479px), print { 
            h1,h2,p { color:black; }
        }

        @media print {
            body { font-family: serif; }
        }


    </style>
</head>
<body>
    <h1>I'm a first level heading</h1>
    <p>I'm a paragraph.</p>
    <h2>I'm a second level heading</h2>
    <p>I'm another paragraph.</p>
</body>
</html>

— 山姆·斯科特
source

2

萨姆·斯科特（Sam Scott）：@BananaNeil的答案比我的更令人满意，如果可以的话，将其标记为最佳答案。

— Digger

246

我通过向页面添加meta标签来解决此问题：

 <meta name="viewport" content="width=device-width">

更新（2019年12月）：

看起来您可能还需要设置初始比例和最小比例，如下所示：

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

— 香蕉尼尔
source

7

这也为我工作。知道为什么这可以解决问题吗？

— Richie Thomas

@BananaNeil：甚至我很好奇，知道这种解决方案起作用的原因是什么？有什么想法吗？

— dreamweiver

2

chrome模拟器似乎总是尝试将946px页面渲染并缩小到要模拟的任何大小的屏幕。通过检查问题页面的body标签的宽度是否始终946px在模拟器中，您可以看到这是正确的。viewport标记告诉浏览器应如何尝试呈现页面。width=device-width发挥您的期望，同时width=100px扩大一切。您可以在此处了解更多信息：w3schools.com/css/css_rwd_viewport.asp

— BananaNeil

2

如果缩放过大，它也可能会表现得很怪异。。。您只能获得可以输入的尺寸。在Mac上，如果您执行cmd

— shift-

1

很难记住这不是默认设置；）

— doublejosh

19

接受的答案对我来说不是这样做的，我还必须添加一个minimum-scale=1。

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

— Sanjsanj
source

1

你是对的，我不知道这个增加的属性

— minimum

6

Chrome中的设备仿真仍然是WIP。老实说，我认为他们过早将其推向Chrome。尝试使用Canary（Chrome Beta浏览器）测试仿真，我发现它的工作方式比Chrome中的工作方式更好。

— 挖掘机
source

0

为我工作。

只需在页面的顶部放置一个视口元标记。参见示例：

 <head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

— 娜蒂·卡穆瑟（Nati Kamusher）
source

0

在您的代码中包含此元标记：

<head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

展开摘要

— 威廉姆维阿斯
source

0

一直遇到相同的问题，直到我注意到如果我根据屏幕尺寸对同一套规则有多个实现：

指定同一媒体查询的最小和最大宽度，以免后续的查询被覆盖：

@media screen and (min-width:9px , max-width:9px) {

    css.selector { 

        style rules gets applied : in this range of screen sizes ;

    } 

}


css.selector{


    the other style get applied : starting from 10px ;

}

或为所有对象设置至少一个断点：

@media screen and (min-width:9px) {

    some styles get applied : starting from this point ;

}

}

@media screen and (min-width:99px) {

    some styles gets applied : starting from this point ;

}

}

— 莫斯塔法
source