RETINA时代的前端优化

RETINA时代的前端优化

原文链接:http://yukun.im/css/477

一,什么是Retina?

“Retina”“视网膜屏”是苹果为最新的双密度的屏幕起得名字,其他厂商也有类似的屏幕,只是不叫这个名字。最新的iPhone,iPad,MacBook Pro等设备用的就是这类屏幕。

二,Retina屏幕带来了什么问题?

以MacBook Pro with Retina Display[3]为例,工作时显卡渲染出2880×1800个像素,其中每四个像素一组,输出原来屏幕的一个像素显示的大小区域内的图像。这样一来,用户所看到的图标与文字的大小与原来的1440×900分辨率显示屏相同,但精细度是原来的4倍…由四个像素代替原来一个像素。

wikipedia

这样就会造成普通图片在Retina屏幕上显示模糊

Non-Retina display and retina display

三,这个问题会影响哪些地方?

1,Favicon

2,Web Clip

3,图片

4,图标

四,怎样解决这个问题?

将原来的文件增大为原来的4倍(宽高都X2) 继续阅读