Chrome设备模式仿真媒体查询不起作用
出于某种原因，设备仿真模式不能读取我的媒体查询。 它工作在其他网站，包括我自己的网站，我用bootstrap做的，但它不适用于我从头开始使用的媒体查询（单击媒体查询button将button变成蓝色，但不显示媒体查询）。 下面的testing文件。 这是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> 我通过向我的页面添加元标记来解决此问题：
<meta name="viewport" content="width=device-width">
Chrome中的设备仿真仍然是WIP。 说实话，我认为他们把它推到Chrome有点太早了。 尝试使用加那利（铬testing版浏览器）来testing仿真，我发现它的工作方式比Chrome中的更好。
