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

标签: CSS3 构建 | 发表时间:2012-04-06 11:22 | 作者:alon
出处:http://varhi.com

移动和非移动的设备间的界限越来越模糊了,我们有平板电脑和上网本,他们介于手机的桌面电脑之间,甚至我们使用其他的设备,比如游戏机来浏览网页,它们有不同的屏幕尺寸,分辨率和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
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

相关 [ipad3 媒体 技术] 推荐:

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

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

历时半个月时间 中国内地小伙自制iPad3

- 逆鳞 - cnBeta.COM
正当苹果迷热切期待iPad 3推出,中国一名青年已迫不及待,率先自u一部山寨“iPad 3”,并将装嵌过程拍下放上网,吸引不少网民观看. 这部DIY iPad成本2000元人民币,片中声称历时半个月u作. 不少网民都看都留言,劲这位青年“能人所不能”.

十年回馈!CyberArticle、Wiz 有奖活动(iPad3)

- 临池学书 - 善用佳软
CyberArticle(网文快捕)开发十年了. 十年历程,对一个国内敬业的程序员来讲,意味着很多. 作为旁观者,我看到国内的CyberArticle、Wiz、myBase、PKM2、WebSaver在产品上如此优秀,但在推广和收益上却落后于国外同类产品,倍感无奈. 但是,十周年还是要庆祝的,并预祝未来更美好.

分析:苹果 iPad3是否该支持LTE

- - 178苹果专区 apple.178.COM
苹果将在三月推出iPad3(或是什么其他名字的新机种)的传言沸沸扬扬,本周许多人讨论的话题更是专注:iPad3会支持LTE吗?. 华尔街日报报载知情人士指出Verizon与AT&T都将销售新一代iPad并让用户使用其LTE网络,如果成真,这将是iPad第一次在规格上赢过iPhone. 对此,素来号称苹果神算的美国网站iFixit执行长Kyle Wiens表示:“苹果如果打算推出1080p的影音等级就必需快点解决频宽拥塞的问题;另外,苹果的无线同步功能很棒,但速度真的太慢了,可见iPad支持LTE不是无稽之谈.

网络视频技术问答(13):什么是自适应流媒体技术?

- - 钛媒体TMTpost—把脉科技资本论
自适应流媒体技术,就是能够智能感知你的下载速度,然后动态调节视频的编码速率,为你提供最高质量、最平滑的视频演播的技术. 答:所谓自适应流媒体技术,就是能够智能感知您的网络质量,然后动态调节视频的编码速率,为你提供最高质量、最平滑的视频演播的技术. 在我们看视频的时候,我们的网络下载速度就像高速公路上的汽车流量一样,不是一成不变的.

再谈css媒体介质查询技术

- - 收集分享互联网资源!
css3 增强了媒体样式表的支持,让样式表更精准. 一个媒体介质查询有媒体类型和至少一个媒体特点表达式组成,比如宽、高、和颜色等. 媒体介质查询可以在不改变内容的前提下,根据输出设备的范围,精准的呈现. 媒体查询有媒体类型和一个或多个表达式组成,包括媒体特性,这样就组成了一个 真 或 假 的表达式.

使用CSS3媒体查询技术创造响应式设计

- - 收集分享互联网资源!
显示器的分辨率的范围越来越宽泛了,从苹果的 320px(iphone)到 2560px(大显示器其)甚至更大. 用户浏览网页的的设备也不仅仅是桌面电脑了. 现在用户使用手机,上网本,平板电脑设备如iPad 或者 Playbook 等来登录网站. 因此传统的固定宽度的设计的方法将不再适用. 布局需要能自动适应的分辨率和解析设备.

新媒体和新技术带来的新职位

- - MADBRIEF | 疯狂简报
没错,技术同样改变职场,或者说,你周围正在发生的流行都可能会让一些职位成为人才市场上的热点,而让另一些职位遭遇没落的尴尬. iPhone以及iPad的流行让iOS开发工程师这个职位变得炙手可热,根据智联招聘首席人力资源顾问郝健提供的数据,iOS开发工程师职位在过去两个月的竞争指数为85(投递数/职位数),平均月薪8564元.

Twitter的这种信息分类技术,在社交媒体中怎么用最有效?

- - 雷锋网
Hasgtag :“#XX”这种形式的标签,被称作是 hashtag,你可以用它来标注你的 Tweet (即用户发到Twitter上的信息)里面的关键词和话题. hashtag 是推特的用户原创发明,是一种给信息分类的方法. ——Twitter 对 hashtag 的官方解释. 2009 年 7 月 2 日推特为推文里出现的所有 hashtag(#XX) 都加上了超链接.

【转载】拖拽即可收纳富媒体内容,基于HTML5技术的Mural.ly可成为在线协作和头脑风暴的新工具

- - HTML5研究小组
如果你厌烦了传统类似word或ppt那些编辑工具,又觉得思维导图类软件的层级性还不能帮你梳理思路的话,现在可以试试 Mural.ly. Mural.ly是一个基于HTML5技术的大画板,你可将从网络中获取到的内容像挥洒染料一般放进Mural.ly. Mural.ly已向公众开放,并获得了77.5万美元的种子投资.