2

嗨,伙计们(当然还有女孩)

我在使用 webkit 和媒体查询时遇到了一个大问题。基本上他们只在他们应该的 15-30 像素后才开始。

当我加载启用了 Javascript 的页面时,我可以从控制台看到正确的设备宽度,这与我向它抛出的扩展数组相对应。

当我禁用 javascript 时,我得到了相同的结果,所以很明显不是我的 javascript 或任何插件都在扔东西。

在开发工具中,我可以看到检查器选项卡,并且相关的媒体查询直到它们应该启动后才会启动,您可以看到他们启动的分辨率与媒体查询本身不匹配。

任何帮助都将不胜感激,因为我现在无法提出任何其他建议。

如果有任何我可以给你的信息可以帮助你帮助我,请告诉我(由于未披露,我可以提供的屏幕截图受到限制)。

在此先感谢并希望 :-) 约翰

4

3 回答 3

2

在 Twitter 上分享我的问题后,我收到了这个有修复的链接

http://mattstow.com/your-media-queries-are-wrong-fix-them-with-viewport-genie-and-mqg​​enie.html

它基本上说 webkit 在应用媒体查询时没有考虑滚动条,这将(对我)解释媒体查询关闭的正确空间。我希望其他人觉得这个答案很有用,因为我通过搜索谷歌找不到任何信息。显然,现在我能够缩小搜索范围,我可能能够在那里找到答案。

于 2013-08-14T12:44:37.697 回答
1

检查浏览器宽度和视口宽度之间的差异。后者是您想要为手机、平板电脑等设计的后者。

于 2013-08-14T12:24:08.413 回答
1

滚动条是造成这种情况的原因,由于滚动条,js计算的宽度和您在媒体查询中定义的宽度不一样(我认为在某些浏览器中它们是相同的,但不是全部)。

您需要同步宽度,以便js和媒体查询相同。如果您想使用媒体查询宽度,那么您可能需要一个元素来检查 css 的更改。如果您想使用 js 宽度,那么您可以轻松地将一个类添加到正文并使用该类定位您的媒体查询。我相信还有其他同步方式。

于 2013-08-14T12:28:19.767 回答