主机格调

自从昨天用了新买的Macbook Pro后,感觉整个互联网网页都模糊了。。。不过还是有一些大型网站对Retina屏幕对了优化处理,由衷感谢各位前端工程师们。

之前在《移动端网页制作入门之二:移动端与PC端间的不同特性》就提到,手机里看图片会模糊,当时提供了两种最常见、简单的办法。这里拓展下,把一些大型网站使用的方法都罗列下。

直接看【DEMO】吧,主要针对配备Retina显示屏的Macbook Pro的Safari/Chrome浏览器、手机端浏览器、平板电脑浏览器这三种设备。(百度Logo为普通图片,腾讯Logo为高清图片)

方法一优点:

  • 全兼容;

方法一缺点:

  • 普通设备也请求的高清图片,浪费流量,没必要;

方法二优点:

  • 对应设备请求对应尺寸图片;

方法二缺点:

  • 部分设备不兼容;

方法三优点:

  • 全兼容;

方法三缺点:

  • 普通设备也请求的高清图片,浪费流量,没必要;

方法四优点:

  • 对应设备请求对应尺寸图片;

方法四缺点:

  • 部分设备不兼容;

方法五优点:

  • 全兼容;
  • 对应设备请求对应尺寸图片;

方法五缺点:

  • 无明显缺点;

综上所述,第五种是兼容性最好,而且对用户节约流量的方法。当然,你非要跟他找个缺点,也不是没有的。例如商品列表的图片,需要开发传图片链接,这个时候,方法五就不能使用了。

方法六优点:

  • 全兼容;
  • 对应设备请求对应尺寸图片;

方法六缺点:

  • 需要加载JavaScript;

用JavaScript判断,替换对应图片链接,简单粗暴,配合图片懒加载,效果更好。

当然还可以通过服务器来处理这个图片链接,我不会,就不举例了。

百度Logo用的方法一,淘宝Logo用的方法四,腾讯Logo用的方法四、五。

总结:没有最好的方法,只有最适合自己的方法,自己去取舍吧。

扩展:

http://ued.taobao.com/blog/2013/01/css-and-html5-adaptive-images/

http://www.w3cplus.com/node/564

http://www.zhangxinxu.com/wordpress/2012/10/new-pad-retina-devicepixelratio-css-page/

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/498.html