媒体查询适用于设备，但不适用于浏览器调整大小

Question

在使用媒体查询方面，我似乎与许多其他人有相反的问题： 当我调整浏览器大小时，我似乎无法启动不同的查询。但是，当我访问我的iPhone上的网页时，它工作正常。

http://dknytkom.dk/forside/

我通过在主容器中添加背景颜色来测试它，但颜色变化只发生在实际的iPhone上 - 而不是浏览器本身。 比如我写过：

在grid2.ccs的顶部，我将主容器的bg颜色设置为蓝色。我写下来了：

@media only screen (min-width : 768px) and (max-width : 1254px) {
      body, #main-container { background-color:pink;}
}

再往下：

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {body, #main-container { background-color:yellow;}

确实会发生颜色变化 - 但只有我的设备（iPhone）而不是浏览器调整大小。

注意：也许这个主题是：  Media Queries - Mobile vs Desktop Browser

“如果我使用max-device-width而不是max-width，它会在移动浏览器上响应，而不是桌面浏览器......”

Answer 1

是的 - 因为事实证明浏览器中没有发生变化的原因是我为 min-device-width 和 max-device-width

仅使用 min-width 和 max-width 不是技巧