问题与CSS媒体查询（滚动条）
我在Firefox中的CSS媒体查询有问题。 它在Chrome中正确工作，就像我做了两个DIV，并且想要一个滚动条。 如果我将Firefox的屏幕尺寸降低到800像素，那么两个DIV都会崩溃，并且在某些像素媒体查询可以正常工作，但在Chrome中不会发生这种情况。
检查这个小提琴http://jsfiddle.net/RMvqC/2/
基于Firefox和Webkit的浏览器以不同的方式呈现滚动条。 在Firefox中，MediaQuery认为滚动条的宽度与屏幕宽度是15px，但在基于Webkit的浏览器中，它不被认为是具有屏幕宽度的滚动条。 所以，这就是为什么浮动的DIV在Firefox中崩溃。
我做了一些与CSS的东西可能是帮助你。 （检查这个小提琴 ）
html { /* force scrollbars */ height: 101%; } body { margin: 0; padding:0; white-space:nowrap; } #box1, #box2 { display:inline-block; width: 400px; height: 200px; vertical-align:top; white-space:normal; } #box1 { background: #ce0000; margin-right:-5px; } #box2 { background: #8e0000; } @media screen and (max-width: 799px) { body { white-space:normal; } #box1, #box2 { width: 300px; } }
我通过在项目头部调用“mqGenie”javascript解决了这个问题。
现在我的媒体查询的宽度可以在Chrome，Safari，Firefox和IE浏览器（无论是否使用scroolbars）上正常工作（具有相同的值）。
此JavaScript调整浏览器中的CSS媒体查询，这些查询在视口宽度中包含滚动条宽度，以便以预期的大小触发。
你可以从这个url下载：
Firefox和Opera遵循W3C规范，即在媒体查询宽度中包含滚动条宽度（原因可能是为了避免无限循环，如此处注释中所述），而Webkit没有（可能因为他们认为这没有意义）
有一个解决方法（我只在FF上testing过），显然如果你强制滚动条始终可见，那么现在宽度将和Webkit一致。 代码如下：
html { overflow:hidden; height:100%; } body { position:relative; overflow-y:scroll; height:100%; -webkit-overflow-scrolling:touch; /* So iOS Safari gets the inertia & rubber-band effect */ }
如果您只想将其应用于FF＆Opera，您可以使用CSS hack：
/* Firefox */ @-moz-document url-prefix() { html { overflow:hidden; height:100%; } body { position:relative; overflow-y:scroll; height:100%; /*-webkit-overflow-scrolling:touch;*/ } } /* Opera */ x:-o-prefocus, html { overflow:hidden; height:100%; } x:-o-prefocus, body { position:relative; overflow-y:scroll; height:100%; }
不用说，警告是滚动条在任何时候都是可见的，这可能是一个好的妥协。
您可以使用CSS-hack轻松实现Firefox的解决scheme。 在将你的内容包装在一个额外的<div>将这些行添加到你的CSS中：
/* Firefox-Hack */ body, x:-moz-any-link { overflow-x: hidden; } #wrapper, x:-moz-any-link { margin: 0 -7.5px; }
检查jsbin （jsfiddle现在正在运行）
为了有更丰富的响应体验，您可以添加另一个媒体查询： 另一个jsbin
CSS-hack被发现在paulirish.com
这是外设相关的，但我发现一种方法来检测浏览器实际上在任何时候使用的媒体查询，而不必与滚动条和身体宽度… …
基本上，在你的身体的某个地方定义一个绝对定位的1-x-1像素大小的列表，并且为每个要查看的媒体查询条件定义一个列表项。
然后在每个媒体查询定义中，显示/隐藏相应的列表项，然后检查该项是否在脚本中可见。
例：
<body> ... <ul id="mediaQueryHelper"> <li id="desktop"></li> </ul> </body> <style type="text/less"> #mediaQueryHelper { position: absolute; height: 1px; width: 1px; visibility: hidden; top: -999px; left: -999px; } @media screen and (min-width: 481px) { #desktop { display: inline; } } @media screen and (min-width: 320px) and (max-width: 480px) { #desktop{ display: none; } } </style> <script type="text/javascript"> $(document).ready(function() { var _desktop = $("#desktop"); $(window).resize(function() { console.log("media-query mode: " + _desktop.is(":visible") ? "DESKTOP" : "MOBILE"); }); }); </script>
