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

最新推荐文章于 2022-10-09 10:54:01 发布

spring21st

最新推荐文章于 2022-10-09 10:54:01 发布

阅读量6.3k

点赞数 1

分类专栏：前端开发手机开发 HTML5 文章标签： class url 测试 div iphone

本文链接：https://blog.csdn.net/spring21st/article/details/7513906

版权

手机开发同时被 3 个专栏收录

55 篇文章

订阅专栏

前端开发

47 篇文章

订阅专栏

HTML5

28 篇文章

订阅专栏

本文探讨了在iPhone4s的640x960高分辨率屏幕下，如何解决320x480设计的图片模糊问题。提供了针对<img/>标签和背景图片两种情况的解决方案，并展示了测试效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

测试效果图如下：