PPK:orientation媒体查询

译自:The orientation media query
中文:PPK:orientation媒体查询
原作者:PPK[Peter Paul Koch]
请尊重版权,转载请注明来源,多谢!


最近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),并允许你利用该信息到你的样式表中

@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——神飞注)

这个设备的宽度在你切换到横屏的时候保持不变,它没有更新到你现在可用的更宽的屏幕。(screen.width/height同样也不会。)

这可能是Apple故意的,而不是一个bug。保持最终的设备宽度不变意味着页面(或者APP)在用户旋转设备的时候不会改变它们的布局。

即便如此,这还是令人纠结的。当我们创建越来越多的移动网站的时候,关于设备、屏幕、页面、缩放比例以及滚动偏移的精确信息将变得非常重要。(在接下来的几个月中,我将完全地抓住这一点。浏览器厂商们,你们要小心了。)

所以iPhone限制了网页开发者需要的关键信息。因此我将这个行为当作一个bug,不管事实上它可能是故意的。

无论如何,由于orientation媒体查询的情况对iPhone OS很重要,也许你将不能辨别用户已经改变了设备的方向。这就是为什么说iPhone不支持它是一个遗憾的原因了,而iPad的做法是一个好消息。

总结:

  1. 默认使用device-width媒体查询;
  2. 在iPhone OS中,使用orientation媒体查询做为扩展。

其实到现在我还完全不能确定你该如何将这两个整合到iPhone OS系统或者单独使用它们。我将思考一下,或者某个读者能给出一个好的可行性方案。