[MobilewebApp]图片的适配与清晰度

iPhone4s的屏幕分辨率是640x960，这样就带来一个问题：

原来设计的320x480的设计出来的icon等图片，在高分辨率下就会显得模糊。

在经过讨论、查阅资料和测试后，可以有方法解决哦~

1. 对于采用<img/> 方式引用图片的：

1. <div>
2. <p>屏幕图片测试</p>
3. <p>原图320：<img src="data:images/icon_16x16_320.png" alt="320" ></p>
4. <p>原图480：<img src="data:images/icon_24x24_480.png" alt="480" ></p>
5. <p>原图640：<img src="data:images/icon_32x32_640.png" alt="640" ></p>
6. <p>480压缩2/3后显示效果：<img src="data:images/icon_24x24_480.png" alt="2/3" style="width:16px; height: 16px; "></p>
7. <p>640压缩1/2后显示效果：<img src="data:images/icon_32x32_640.png" alt="1/2" style="width:16px; height: 16px; "></p>
8. </div>

2. 对于采用背景图片的：

1. <div>
2. <p>背景图测试</p>
3. <style type="text/css">
4. .bg_img_test p{padding-bottom: 20px;padding-left: 50px;}
5. .bg_icon_320{background: url(images/icon_16x16_320.png) no-repeat; }
6. .bg_icon_480{background: url(images/icon_24x24_480.png) no-repeat; }
7. .bg_icon_640{background: url(images/icon_32x32_640.png) no-repeat; }
8. .bg_icon_2x3_480{background: url(images/icon_24x24_480.png) no-repeat;-webkit-background-size: 16px 16px;background-size: 16px 16px;}
9. .bg_icon_1x2_640{background: url(images/icon_32x32_640.png) no-repeat;-webkit-background-size: 16px 16px;background-size: 16px 16px;}
10. </style>
11. <div class="bg_img_test">
12. <p class="bg_icon_320">原图320的背景图</p>
13. <p class="bg_icon_480">原图480的背景图</p>
14. <p class="bg_icon_640">原图640的背景图</p>
15. <p class="bg_icon_2x3_480">原图480的背景图压缩2/3</p>
16. <p class="bg_icon_1x2_640">原图640的背景图压缩1/2</p>
17. </div>
18. </div>

测试效果图如下：