CSS 媒体查询与设置宽度不匹配的像素答案

【问题标题】：CSS media queries pixels not matching set widthCSS 媒体查询与设置宽度不匹配的像素
【发布时间】：2014-06-06 01:59:34
【问题描述】：

已经尝试调试了几个小时。我被要求修复一个真正有问题的“响应式”网站。我无法分享实际代码 b/c 它都在安全网络的本地主机上。希望您可能会看到我在此处的描述中出现了灯泡熄灭的情况。

问题，我们有@media (max-width:800px)，它停止影响大约 600px 宽的页面元素。

另一个例子，我设置了html{ max-width:1200px}，但为了让浏览器真正适合我的 1200 像素浏览器窗口，我必须将其设置为 2250 像素。

我的问题是，这会给任何人敲响警钟吗？我正在浏览所有的 CSS，并没有看到任何立即看起来像问题的东西。这些家伙真的打破了响应式设计.. bleh

谢谢..

编辑

这是适用的元标记

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">

...一堆垃圾...

<meta name="viewport" content="width=device-width, initial-scale=1">（再次）

【问题讨论】：

它看起来与像素比有关。通常这是为 Retina 显示器实现的。代码中有类似的东西吗？喜欢media query中的-webkit-pixel-ratio？
我在 CSS 中没有看到任何类似的东西 - 搜索了所有 CSS 文件并确实找到了一些像素比：2，但它们已被注释掉。我用来解决问题的媒体查询是超级简单的最大宽度。不检查方向或设备等。
也许它嵌入在 HTML 或其他文件中的某处？此外，当视口宽度为 600 像素时，开发工具中关于此 800 像素媒体查询的显示是什么？
在 626px 宽的情况下，我正在从这个媒体查询中毕业（正如 Chrome 所看到的那样） media="screen" @media (max-width: 835px)。我尝试搜索所有（chrome 中的 ctrl + f），发现 4 次提到“像素比”还没有找到任何声明像素比的东西。不过我会继续寻找，谢谢。
找到了。它在 js 中，一开始不应该用于响应式布局。天哪。谢谢。如果没有您的像素比建议，就无法找到它.. 不是我的大脑所在的地方:)

【解决方案1】：

在一些帮助下，我能够解决问题。

问题与像素比率声明有关，但与 CSS 和缩小的 Javascript 无关...

消除这个不必要的 js 使页面按预期加载。

核心课程：使用 javascript 实现功能，使用 CSS 进行设计和布局。

【讨论】：