Chrome 中的 CSS 媒体查询延迟？

Question

我现在有一个非常奇怪的经历，试图在我正在开发的网络应用程序上实现响应式 CSS 媒体查询，我只是想看看是否有人对为什么会发生这种情况有任何理论。

这里是一些上下文:

• 正在开发 Django 应用程序，在本地服务器上运行(本地主机:来自 manage.py runserver 的 8000)
• 只是修改了 style.css 文件，一切正常。如果我对 style.css 进行了更改，刷新了更改，我的工作在浏览器中看起来很好
• 我现在正在测试 Chrome 和 Firefox 中的浏览器兼容性

所以工作流程一直在正常进行，直到我开始在同一个 style.css 文件的底部编写一些媒体查询。一个例子是:

@media screen and (max-width: 1080px) {
    #hero .user-actions {
       float: left;
       width: auto;
    }
}

这是 Chrome 中发生的事情:在我编写并保存该查询后，如果我将浏览器宽度从 1200 像素减小到 1000 像素以测试更改(通过多个第 3 方应用程序测量)，没有变化 - 媒体查询是根本就没有被发现。我没有在 Chrome 浏览器网站管理员工具的元素中看到媒体查询(但它们在 Firefox 和其他浏览器中显示良好)。我试过 (1) 清除我的 Chrome 浏览器缓存，(2) 返回终端并运行

manage.py collectstatic

我查看了我的元视口(viewport)标签，我检查了我的 CSS 语法，但我不知道为什么它不能在 Chrome 中专门读取它。现在，奇怪的是，如果我将 Chrome 浏览器的尺寸进一步减小到 965px 宽度或更窄，突然间我的最大宽度 1080px 媒体查询会出现并开始在 Chrome 中工作。所以这就像在 chrome 获取媒体查询之前有 115px 的边距。嗯？以前有没有人经历过这样的事情？ Chrome 中是否有某些设置或我没有想到的可能导致此问题的设置？我查看了一些其他帖子并看到了对 -webkit 缩放错误的引用，但这里不是这种情况。

Answer 1

我没有答案……但我也有媒体查询加载/缓存问题。它从上周开始在我的 Chrome Canary 中开始，从今天早上开始，我在我的 Chrome Dev (29.0.1521.3) 中感受到了同样的痛苦(是的，很痛苦)。。 p>

我的媒体查询

<link media="screen,projection,tv" href="style.css" rel="stylesheet" type="text/css" />
<link media="only screen and (min-width:250px) and (max-width:500px)" href="responsive-mobile.css" rel="stylesheet" type="text/css" />
<link media="print" href="print.css" rel="stylesheet" type="text/css" />

奇怪。我在去年夏天实现了响应式媒体查询，直到 Canary 上周开始缓存我的 responsive-mobile.css 文件后才遇到任何问题。然后我意识到 Canary(现在是 Chrome Dev)正在加载我的 print.css 文件盎司我的 responsive-mobile.css 在将我的浏览器的视口(viewport)从大到小拉伸(stretch)后加载并返回。

所以不，抱歉，我没有答案。但是一堆问题。 ;)