媒体查询在浏览器中工作正常但不是答案

【问题标题】：Media queries working fine in browser but not媒体查询在浏览器中工作正常但不是
【发布时间】：2012-09-12 01:04:05
【问题描述】：

我已经开发了这个页面：

http://bluebeam.com/us/support/ipad/

媒体查询在每个浏览器中都可以正常工作，但是当我在 ipad 上对其进行测试时，它什么也没做……它只是恢复到正常的 CSS。我已经清除了 iPad 上的浏览数据，但没有结果。我可以看到它在我的 iPhone 上运行。

谁能发现我的代码有问题？

编辑：第一个查询（水平布局）正在运行。但是当我翻转 ipad（垂直布局）时，第二个没有触发。

【问题讨论】：

由于某种原因，排版是 iPad 上唯一不会改变的东西......我可以在媒体查询中更改颜色，但排版仍然是默认设置（这真的是唯一的我需要改变的东西）。

标签： ipad responsive-design media-queries

【解决方案1】：

如果我没记错的话，iPad 会在方向改变时交换宽度/高度值。我会试试这个：

/* portrait*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)

/* landscape */
@media only screen 
and (min-device-width : 1024px) 
and (max-device-width : 768px)

我已经有一年没有遇到类似的问题了，所以我可能有点落伍了。

【讨论】：

出于某种原因，每当我包含 only 屏幕时，它都会中断查询。我知道这是引用查询的正确方法，所以我想知道为什么它会破坏它们。 min-device-width 也会破坏它们。我在没有这些的情况下尝试了它们，但它不起作用，它只再次使用了第一个查询。
试试 min-width 和 max-width。
是的，我做到了。它仍然只恢复到第一个查询，在两个方向上。