device-width 与orientation

最近Jason Grigby关于orientation媒体查询的概述在博客圈和twitter中疯传，那确实很棒。媒体查询(meidia query)在不久的将来将变得非常的重要——当我们不得不制作在从300px到1280px甚至更多的所有设备分辨率中可用的网站时。

然而，我还是想要指出的小瑕疵，以使你完全理解什么时候使用orientation，什么时候使用device-width。

orientation被Android 2、Bolt、MicroB和Firefox支持，现在，显然也被iPad支持了。iPhone尚不支持它。我们马上就会看到这为什么是不幸的，就把这个添加到我的iPhone OS 4的希望列表中吧。

device-width 与orientation

我曾经常在杜塞尔多夫与沃达丰讨论媒体查询，然后最终一致认为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

然而，在iPhone OS中有些问题。那些设备通常就是320px(iPhone)或者，我估计，iPad会是768px。(使用iPad的朋友可否在这个测试页面中确认一下最终的数字？PS:原文评论者有人测试，确实是768px，而不是之前媒体报道的1024px——神飞注)

这个设备的宽度在你切换到横屏的时

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!