调整浏览器窗口大小时，Chrome 不会更改设备宽度答案

【问题标题】：Chrome not changing device-width when I resize the browser window调整浏览器窗口大小时，Chrome 不会更改设备宽度
【发布时间】：2013-07-02 16:56:14
【问题描述】：

我正在使用屏幕分辨率为 1600x900 的 PC。这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Page title</title>

    <style type="text/css">
        @media screen and (max-device-width : 600px) {
            body { background-color:#F00; }
        }
    </style>
</head>

<body></body>
</html>

问题是我正在尝试开发该站点的响应版本，并且在开发时我想在我的 PC 上使用 Chrome。我期待当我将浏览器的宽度调整为小于 600 像素时，媒体查询会运行，但它似乎认为我的设备宽度是 1600 像素并且它永远不会改变。如何在我调整 PC 上的窗口大小时触发媒体查询？

【问题讨论】：

标签： css responsive-design

【解决方案1】：

从@media screen and (max-device-width : 600px) { :http://jsfiddle.net/7rSzr/ 中删除“设备”

制作：

@media screen and (max-width : 600px) {
    body { background-color:#F00; }
}

【讨论】：

【解决方案2】：

“我想在我的电脑上使用 Chrome”

您可以在 Chrome 开发者工具的设置中更改device-width。之后刷新您的页面并欣赏红色背景；）

【讨论】：