CSS Media Query min-width 无法正常工作答案

【问题标题】：CSS Media Query min-width not working correctlyCSS Media Query min-width 无法正常工作
【发布时间】：2013-05-16 20:56:23
【问题描述】：

我有一个类似的 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code: NewYork</title>
    <link rel="stylesheet" href="test.css" />
</head>
<body data-ng-app="us">
    <input type="text" />
</body>
</html>

我的 CSS 是：

input {
  background-color: red;
}
/* ---- Desktop */
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
    input {
        background-color: green;
    } 
}

现在当窗口宽度为 909 像素时，CSS 会应用。显然不是滚动条问题。我对这个简单的问题感到抓狂。我用 Chrome 和 IE10 都测试过。

任何人都可以帮助我在这里做错了吗？

【问题讨论】：

标签： css media-queries

【解决方案1】：

我使用了这个 HTML：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code: NewYork</title>
</head>
<body data-ng-app="us">
    <input type="text" />
</body>
</html>

使用像这样更简单的媒体查询声明：

@media (min-width: 1000px) and (max-width: 1200px) {

 input {
        background-color: green;
    } 

}

这里很好用：http://jsbin.com/ubehoy/1

使用Firefox Responsive Design View 调试并拖动调整器，当达到宽度限制时，它会正确更改输入背景颜色。

用 Chrome 26.0.1410.64 m/IE 10 试过，效果也很好。

【讨论】：

该死的我是愚蠢的。该选项卡处于缩放级别，为此花了几个小时-_-我应该工作这么晚...谢谢！
对@user1974505 的大力支持，我在 110% 时也有同样愚蠢的缩放。当我读到它时，我做了一个 /facepalm 并重置为默认值......就像一个魅力！
我遇到了完全相同的问题。是的，放大镜打开了！不知道这会影响页面的报告像素宽度。
放大镜对我来说也失败了...... :(
只需要检查并说缩放真的让我很伤心，我敢肯定我自己不会看到这个，谢谢！

【解决方案2】：

我时常遇到这种情况。确保您的标签未放大 (⌘0)

【讨论】：

【解决方案3】：

@media (min-width: 1000px) and (max-width: 1200px) {

 input {
        background-color: green;
    } 

}

这可行，但请确保检查缩放。（我从 cmets 那里得到了这个答案，因为这似乎是这里的大问题。我也爱上了它）

【讨论】：