最近Jason Grigby关于orientation媒体查询的概述在博客圈和twitter中疯传，那确实很棒。媒体查询(meidia query)在不久的将来将变得非常的重要——当我们不得不制作在从300px到1280px甚至更多的所有设备分辨率中可用的网站时。
然而，我还是想要指出的小瑕疵，以使你完全理解什么时候使用orientation，什么时候使用device-width。
orientation被Android 2、Bolt、MicroB和Firefox支持，现在，显然也被iPad支持了。iPhone尚不支持它。我们马上就会看到这为什么是不幸的，就把这个添加到我的iPhone OS 4的希望列表中吧。
我曾经常在杜塞尔多夫与沃达丰讨论媒体查询，然后最终一致认为orientation相对没什么用，相反我们应该使用device-width。
首先，device-width被更广泛的支持。Opera、所有的移动版WebKit、以及Firefox 和MicroB 都支持这个媒体查询。
其次，device-width会告诉你你需要知道的内容，而orientation不会。问题不是一个设备是纵向还是横向，而是屏幕有多少可用空间。
这正是device-width能够告知你的。它使用具体的屏幕分辨率(在JavaScript中可使用screen.width/height)，并允许你利用该信息到你的样式表中
1 2 3 |
@media all and (max-device-width: 400px) { // 用于最大宽度400px的样式 } |
现在你可以确定你的样式只会应用于400px或更小的屏幕。无论设备是横屏还是纵屏。不过，它可能会把事情搞的有点儿混乱，因为一些低端手机的横屏可能会小于400px，而一些高端手机的纵屏宽度可能就会大于400px。
你没有办法只用来orientation解决它。它不会告诉你关于屏幕分辨率的任何事情，只是关于当前用户怎么拿这个设备。这在某些情况下可能比较有意思，但不是在你制作基本的CSS布局的时候。
所以作为一个通用的规则，应该避免orientation而使用device-width代替。
然而，在iPhone OS中有些问题。那些设备通常就是320px(iPhone)或者，我估计，iPad会是768px。(使用iPad的朋友可否在这个测试页面中确认一下最终的数字？PS:原文评论者有人测试，确实是768px，而不是之前媒体报道的1024px——神飞注)
这个设备的宽度在你切换到横屏的时候保持不变，它没有更新到你现在可用的更宽的屏幕。(screen.width/height同样也不会。)
这可能是Apple故意的，而不是一个bug。保持最终的设备宽度不变意味着页面(或者APP)在用户旋转设备的时候不会改变它们的布局。
即便如此，这还是令人纠结的。当我们创建越来越多的移动网站的时候，关于设备、屏幕、页面、缩放比例以及滚动偏移的精确信息将变得非常重要。(在接下来的几个月中，我将完全地抓住这一点。浏览器厂商们，你们要小心了。)
所以iPhone限制了网页开发者需要的关键信息。因此我将这个行为当作一个bug，不管事实上它可能是故意的。
无论如何，由于orientation媒体查询的情况对iPhone OS很重要，也许你将不能辨别用户已经改变了设备的方向。这就是为什么说iPhone不支持它是一个遗憾的原因了，而iPad的做法是一个好消息。
总结:
device-width媒体查询；orientation媒体查询做为扩展。其实到现在我还完全不能确定你该如何将这两个整合到iPhone OS系统或者单独使用它们。我将思考一下，或者某个读者能给出一个好的可行性方案。