ios中处理retina（视网膜）屏显示下的网页图片

原文：http://xuui.net/ui-design/retinal-display-to-optimize-the-image-the-on-the-the-page.html

iphone和ipad都存在两种屏幕，一种是普通屏，另外一种retina屏。也就是视网膜屏。retina屏的分辨率是普通屏的两倍，在ios原生应用。只要准备两套图片，系统即可自动识别在什么屏幕下显示大图或者小图。但是在webview中html所包含的图片。却不能自动识别。
然后很多人可能说用css中@media query不就行了。。。经本人验证。不起效果。。。。很诡异的是我在ipad模拟器中用safari打开这个起作用。。但就是在程序中webview中不起效果。不知道什么原因，那么怎么解决这个问题呢？
两种办法：一种：始终用大图，第二种：用矢量图。矢量图就不用多说了。。不管多大分辨率。显示效果始终一样。。。第一种：用大图的话。要注意图片的尺寸。。。例如。在普通屏下，我现在要显示一张图片大小为30*30的。。。那么在retina 屏中我应该用60*60的图片。。。因为不能自适应。所以我们只能用60*60的图片。。但是在代码中。我们图片的尺寸应该按照小分辨率下来。。

background-size:30px 30px;

这样就能保证不管什么屏。图片始终清晰了。。