Chrome 错误判断屏幕大小答案

【问题标题】：Chrome mis-judges screen sizeChrome 错误判断屏幕大小
【发布时间】：2014-06-16 22:59:54
【问题描述】：

我只是第一次尝试响应式设计，所以我不确定我是否做了什么，但我认为这只是一个错误。

现在，如果我将浏览器的一部分移出屏幕并将其展开到大约 1345，它会点击进入我为 1224 设置的 css

//So this and @media all are the only ones which work currently
@media only screen and (min-width : 321px) {
/* Styles */
//  div { border: 3px solid purple;}
}
// all others do nothing, confirmed via trial and error
// Works at 1346
@media only screen and (min-width : 1224px) {

  @import "layouts/laptop/layout";
  @include header-large(1224);
  @include logo-mixin;
  @include nav-large(1224);
  @include registrar-mixin;
  @include presenter-mixin(1224);
  @import "bodies/laptop/body";
  @include index-detail-mixin;
  @include show-mixins;
  @include object-location;
}

我使用的是 Mac OS Mav，在 Safari、FF 和 Chrome Canary 中一切正常。老实说，自从我添加了 jQuery UI 之后，Chrome 就表现得很奇怪。如果开发工具打开一段时间，就像 JS 不会运行一样，尽管在使用jshint 和一些添加的分号进行一轮之后，现在似乎已经解决了。所以，我想那是我的错，但 FF 和 Safari 并没有眨眼。哦，我也试过禁用我的所有扩展并重新加载页面，但这也不起作用。所以，我的 CSS 知识已经接近尾声了。

编辑：我还应该提到这发生在几天前。在此之前它工作正常。一天早上我刚醒来，css 停止工作。

【问题讨论】：

我假设您使用的是 SASS，因为那不是有效的 vanilla CSS？
是的，我会添加标签。但这似乎不是那个问题，它是一个rails应用程序。但是样式似乎很好，这是@media 调用，我只是从 css-tricks.com 复制和粘贴的
您使用的是 min-width: 1224px，而 1345 大于 1224，那么为什么不在 1345 px 处应用该 CSS？我不太清楚您遇到的实际问题是什么。
你知道我曾经在同事的机器上遇到过类似的问题。我正在处理的一个页面在他的计算机上一直显示错误的媒体查询。把我逼疯了几个小时，直到我们撞到自己的额头，他意识到他不小心按了 Ctrl++ 并稍微放大了。也许不是你的问题，但值得仔细检查。
@dcc 把它作为答案，我会接受它，因为它做到了。天哪，我什至没有看到网址栏中的放大镜。

标签： jquery css google-chrome sass

【解决方案1】：

这听起来可能很愚蠢，但却是一个容易被忽视的问题，让我感到沮丧和尴尬。

仔细检查您的浏览器是否完全没有缩放，并且您正在以默认的 100% 缩放级别查看页面。

如果您在浏览器中放大或缩小，则会影响媒体查询，并且它们将无法正确显示。

【讨论】：