关于iPad3 和媒体查询技术的几点看法

移动和非移动的设备间的界限越来越模糊了，我们有平板电脑和上网本，他们介于手机的桌面电脑之间，甚至我们使用其他的设备，比如游戏机来浏览网页，它们有不同的屏幕尺寸，分辨率和and densities.现在Ipad3 来了，在这块 9.7 英尺的的屏幕上，拥有比大多数桌面显示器更高的像素点。在这么多屏幕尺寸不同的设备上显示网站而不去为移动版本写单独样式的方法就是使用css媒体介质查询技术，特别是 min-device-width and max-device-width 查询技术。

尽管如此，min-device-width and max-device-width 无法分辨ipad2 和Ipad3，因为Ipad3和Ipad2给出的分辨率依旧是 1024X768， 就像在iPhone4中使用的媒体查询技术一样得到的结果和iPhone 3GS 一样。产生这样的结果的原因是比较容易理解的，因为他们的屏幕尺寸是一样的。如果Ipad3报出了准确的分辨率，网站针对 Ipad2作出的优化将会把Ipad 3当成台式电脑的处理器来处理。此外，如果没有可以宽展的样式来讲特定的尺寸加倍，大多数网站将不可阅读。来将其与其他设备分辩开来的方案就是使用媒体介质查询的 -webkit-device-pixel-ratio，如果属性值为 2 ，将被使用在视网膜显示技术的设备上，也就是 iPad3 或者 iPhone4+.如果值是1，将会被认为是普通屏幕，因为只有某些webkit浏览器支持此属性，你可以认为2将会覆盖默认的属性1.

绝大多数桌面显示器我们都假设为 72ppi(每英尺的像素点)，也就是说一个288像素宽的图片将会占据屏幕4英尺的空间。但是在 iPad3 原生的解析度（264ppi）,相同的图片仅仅是1英尺的宽度。因此，除非我们特别告知，视网膜显示屏技术将会使呈现的像素点数量增加一倍，这将会使文字非常的清晰和锐利，因为它使用了两倍的像素点。但是在图片方面，视网膜显示技术的优势如果仅仅是将分辨率提高一倍的话就没有了。如果将你的图片在iPad3上的的尺寸提高一倍，你的图片也会像文字一样锐利和清晰。缺点是你现在你的图片使用了四倍的像素（两倍的高和宽），图片也会更大，使用更长时间的加载时间。更优的质量和更快的速度之间你要做一个权衡。

在某些情况下，你有必要为移动版本单独开发做开发。是否需要做这些取决于你和每个项目的特点。但是另一方面，必须明白的将开发分为移动版本和非移动版本是局限的。iPad(包括其他平板电脑)拥有移动设备的特点，但是它们的屏幕尺寸相比手机能适应更多的网站。除了移动版本和非移动版本之外，你还需要考虑是不是需要一个专门给平板电脑访问的特殊版本。通过使用媒体查询技术，你可以适应这些不同的屏幕分辨率，同时这也很有前瞻性。

我认为大多数网站都是单一的一个可以快速访问的版本，媒体介质查查询技术使其可以在不同的平台良好的工作。但是我们也必须意识到它并不是唯一的技术。基于媒体介质查询使用轻量级的js库同样可以应对多重图像分辨率的问题，或者通过background-image属性为小屏幕的提供不同的图像，防止加载的过大的图像。必须要注意一些设备，特别是iPhone，对隐藏的元素也加载背景图片，因此隐藏元素的方法来阻值加载背景图片是无效的。事实上，定义一个默认的背景图片，然后通过媒体介质查询技术将其默认的图像覆盖，但这将会导致加载两次图像。产生不同背景的两个背景图像的方法也是使用媒体产介质查询技术。一个使用 max-device-width 另一个使用 min-device-width。

如果你的网站使用单一的相应版本来适应所有的设备，那你肯定能够不想重复加载，特别是针对那些小设备。如果我们从一个较小的版本开始，然后渐进增强将是一个很好的方法。如果处理得当，我们的而外好住那就是如果不支持媒体产讯的设备将会得到一个较小的版本。像前面提到的需要关注图片的问题一样，其它用到的资源你也必须记住。比如，你有一个比较大的js库来处理一些高级的技术，但是这些高级技术你并不希望在显示给手机端用户，那么加载这个大而没有效果的js库是没意义的，那就需要使用一个小的javascript解决方案，用它来判断是不是需要加载这些大的库。甚至额外的HTML也会导致页面膨胀，如果你的网站有很大比例的内容内容是对移动端用户隐藏的，你就需要将其分成多个版本，或者使用aJax技术只在桌面端显示这些部分。对于这些小屏幕的用户，除了要考虑他们的屏幕因素外，这些设备通常在处理器和内存方面的处理能力也有限，更经常会有一些连接上的局限。为他们提供服务时也需要把这些因素考虑在内。

中文原文： 关于iPad3 和媒体查询技术的几点看法
英文原文： Thoughts on Media Queries and the iPad 3
转载请注明以上信息，以表示对作者和译者的尊重，多谢！