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

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

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

 

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

 

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

<div>
        <p>屏幕图片测试</p>

        <p>原图320：<img src="images/icon_16x16_320.png" alt="320" ></p>
        <p>原图480：<img src="images/icon_24x24_480.png" alt="480" ></p>
        <p>原图640：<img src="images/icon_32x32_640.png" alt="640" ></p>
        <p>480压缩2/3后显示效果：<img src="images/icon_24x24_480.png" alt="2/3" style="width:16px; height: 16px; "></p>
        <p>640压缩1/2后显示效果：<img src="images/icon_32x32_640.png" alt="1/2" style="width:16px; height: 16px; "></p>
    </div>

 

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

<div>
        <p>背景图测试</p>

        <style type="text/css">
            .bg_img_test p{padding-bottom: 20px;padding-left: 50px;}
            .bg_icon_320{background: url(images/icon_16x16_320.png) no-repeat; }
            .bg_icon_480{background: url(images/icon_24x24_480.png) no-repeat; }
            .bg_icon_640{background: url(images/icon_32x32_640.png) no-repeat; }

            .bg_icon_2x3_480{background: url(images/icon_24x24_480.png) no-repeat;-webkit-background-size: 16px 16px;background-size: 16px 16px;}
            .bg_icon_1x2_640{background: url(images/icon_32x32_640.png) no-repeat;-webkit-background-size: 16px 16px;background-size: 16px 16px;}
        </style>
        <div class="bg_img_test">
            <p class="bg_icon_320">原图320的背景图</p>
            <p class="bg_icon_480">原图480的背景图</p>
            <p class="bg_icon_640">原图640的背景图</p>

            <p class="bg_icon_2x3_480">原图480的背景图压缩2/3</p>
            <p class="bg_icon_1x2_640">原图640的背景图压缩1/2</p>
        </div>
    </div>

 

测试效果图如下：

 

 

【原创文章】转载请注明出处： chaichunyan [MobilewebApp]图片的适配与清晰度