Question

我目前正在构建一个具有bootstraps响应式布局的网站，我在浏览器中工作正常但出于某种原因，当我在我的Nexus 7平板电脑（屏幕1200 x 800）上以纵向格式查看同一网站时，该网站呈现为媒体查询@media（max-width：767px）而不是@media（min-width：768px）和（max-width：979px）。

有趣的是我在bootstraps [示例网站] [1]上检查了这一点，即使屏幕尺寸足够大@media（最小宽度：768px）和（最大宽度：979px），也会发生同样的事情媒体查询。平板电脑采用横向格式时会加载正确的查询。

这是bootstraps断点。

/* 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) { ... }

我能做些什么来确保平板电脑能够正确查看媒体查询吗？

Answer 1

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

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

window.innerWidth

你的nexus 7显示了什么？

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

Twitter Bootstrap 800px平板电脑媒体查询问题？

1 个答案: