2

我目前正在构建一个具有引导响应式布局的站点，该站点在浏览器中运行良好，但由于某种原因，当我在 Nexus 7 平板电脑（屏幕 1200 x 800）上以纵向格式查看同一站点时，该站点使用媒体查询呈现@media（最大宽度：767px）而不是@media（最小宽度：768px）和（最大宽度：979px）。

有趣的是，我在引导程序 [示例站点][1] 上检查了这一点，即使屏幕尺寸对于@media (min-width: 768px) 和 (max-width: 979px) 媒体查询来说足够大，也会发生完全相同的事情。当平板电脑为横向格式时，会加载正确的查询。

这是引导断点。

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

我能做些什么来确保平板电脑接收到正确的媒体查询吗？

4

1 回答 1

0

我认为这是用于定义媒体查询宽度与您所谓的屏幕宽度的问题。

我发现调用以下 javascript 总是与媒体查询匹配：

window.innerWidth

这对您的 Nexus 7 有什么影响？

有关视口/媒体查询的讨论，请参阅此参考：http ://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

于 2013-03-08T00:36:08.787 回答