Chrome设备模式模拟媒体查询不工作

5vf7fwbs 于 2023-08-01 发布在 Go

关注(0)|答案(7)|浏览(132)

由于某种原因，设备模拟模式无法阅读我的媒体查询。它可以在其他网站上运行，包括我自己用bootstrap创建的网站，但它不能在我从头开始使用的媒体查询上运行（单击媒体查询按钮会使按钮变为蓝色，但不会显示媒体查询）。测试文件如下。这是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>

字符串

google-chrome

来源：https://stackoverflow.com/questions/26888751/chrome-device-mode-emulation-media-queries-not-working

7条答案

按热度按时间

ifmq2ha21#

我通过在我的页面上添加一个Meta标签来解决这个问题：

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

字符串
更新（2019年12月）：
看起来您可能还需要设置初始比例和最小比例，如下所示：

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

型

赞(0）回复(0）举报 2023-08-01

wf82jlnq2#

接受的答案不适合我，我不得不添加一个minimum-scale=1。

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

字符串

赞(0）回复(0）举报 2023-08-01

bmvo0sr53#

Chrome中的设备模拟仍然是一个WIP。老实说，我认为他们把它推到Chrome有点太早了。尝试使用Canary（chrome beta浏览器）来测试模拟，我发现它的工作方式比Chrome中的好。

赞(0）回复(0）举报 2023-08-01

slsn1g294#

在你的代码中包含这个Meta标签：

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

字符串

赞(0）回复(0）举报 2023-08-01

rur96b6h5#

对我来说很好
只需在页面的头部放置一个viewport Meta标签。参见示例：

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

字符串

赞(0）回复(0）举报 2023-08-01

6pp0gazn6#

一直有同样的问题，直到我注意到，如果我有一个以上的实现相同的规则集取决于屏幕大小：
为同一个媒体查询指定最小和最大宽度，这样它就不会被下一个覆盖：

@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 ;

}

字符串
或者将至少一个断点设置为all：

@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 ;

}

}

型

赞(0）回复(0）举报 2023-08-01

dzjeubhm7#

我想补充一点--沿着接受的答案--媒体查询只在chrome的inspect上工作（对我来说），当@media查询写在其余的CSS代码下面时。

赞(0）回复(0）举报 2023-08-01