自从昨天用了新买的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/
我怎么看没有很大的区别。。。
视力又下降了?
这就好像用分辨率高的屏幕玩载入低级分辨率的东西,界面模糊。。
这个解释到位 😎
其实是图片被放大的缘故,高清屏显示一般都会把原来元素放大,MacBook Pro把一个像素变4个像素点 自然这般
未成年学生党屏幕19寸1440*900无压力路过…
普通屏幕下大图缩小两倍的方法好像会模糊?
因为像素比是2,所以缩小2倍正好1:1显示,无比清晰。
帮人制作过,用 js 解决调用问题,当然不一定能 100% 覆盖,但是够用即可
不错~之前一直为这个问题烦恼~又不想加载字体图标
如果是纯色的小图标,iconfont是最好的解决方案
方法一屡试不爽