Chrome 设备模式模拟媒体查询不起作用
Posted
技术标签:
【中文标题】Chrome 设备模式模拟媒体查询不起作用【英文标题】：Chrome Device Mode Emulation Media Queries Not Working 【发布时间】：2015-01-09 09:50:38 【问题描述】：由于某种原因，设备模拟模式无法读取我的媒体查询。它适用于其他网站，包括我使用引导程序创建的我自己的网站，但它不适用于我从头开始使用的媒体查询（单击媒体查询按钮会将按钮变为蓝色，但不显示媒体查询）。测试文件如下。这是 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>
【问题讨论】：
Sam Scott：@BananaNeil 的回答比我的更令人满意，如果可以的话，将他标记为最佳答案。 【参考方案1】：我通过向我的页面添加元标记解决了这个问题：
<meta name="viewport" content="width=device-width">
更新（2019 年 12 月）：
看起来您可能还需要设置初始比例和最小比例，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
【讨论】：
这对我也有用。知道为什么这可以解决问题吗？ @BananaNeil：即使我很想知道这个解决方案背后的原因是什么？有什么想法吗？ 看起来 chrome 模拟器总是试图将946px 页面渲染并缩小到它正在模拟的任何大小的屏幕。您可以通过在模拟器中检查问题页面的正文标签的宽度始终为946px 来看到这是真的。 viewport 标签告诉浏览器它应该如何尝试呈现页面。 width=device-width 以您期望的方式运行，而 width=100px 将所有内容放大。你可以在这里阅读更多信息：w3schools.com/css/css_rwd_viewport.asp
如果您过度放大，它也会表现得古怪...您只能获得可以输入的尺寸。在 Mac 上，如果您执行 cmd shift -，最终会再次弹出移动模拟器列表，其中包含 Galaxy S5、iPhone 6 等...
很难记住这不是默认值 ;)【参考方案2】：
接受的答案不适合我，我还必须添加minimum-scale=1。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
【讨论】：
你说得对，我不知道这个添加的属性minimum-scale=1.. thx 特别是在它在 Firefox 上运行但在 Chrome 上中断的情况下，minimum-scale=1 似乎很重要。【参考方案3】：
Chrome 中的设备模拟仍然是 WIP。老实说，我认为他们将其推送到 Chrome 有点太早了。尝试使用 Canary（chrome beta 浏览器）来测试仿真，我发现它的工作方式比 Chrome 中的要好。
【讨论】：
【参考方案4】：一直遇到同样的问题，直到我注意到 如果我根据屏幕尺寸对同一组规则有多个实现：
为同一个媒体查询指定最小和最大宽度，以免被后续查询覆盖：
@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 ;
【讨论】：
【参考方案5】：我想添加 - 连同已接受的答案 - 媒体查询仅在 chrome 的检查中（对我而言）在 @media 查询被写入 以下 CSS 代码的其余部分时才有效。
【讨论】：
【参考方案6】：为我工作。
只需在页面的头部放置一个视口元标记。见例子：
<head>
<!--include the following meta tag to make chrome dev tools recognize media queries: -->
<meta name="viewport" content="width=device-width">
</head>
【讨论】：
【参考方案7】：在您的代码中包含此元标记：
<head>
<!--include the following meta tag to make chrome dev tools recognize media queries: -->
<meta name="viewport" content="width=device-width">
</head>【讨论】：
以上是关于Chrome 设备模式模拟媒体查询不起作用的主要内容，如果未能解决你的问题，请参考以下文章