安卓浏览器看图片，有些模糊，解决方案！

最新推荐文章于 2024-04-14 01:40:16 发布

confidence68

最新推荐文章于 2024-04-14 01:40:16 发布

阅读量4k

点赞数

分类专栏： android 移动设备前端技术微信开发文章标签： css3 手机

本文链接：https://blog.csdn.net/confidence68/article/details/34078003

版权

前端技术同时被 3 个专栏收录

33 篇文章

订阅专栏

移动设备

9 篇文章

订阅专栏

android

4 篇文章

订阅专栏

本文探讨了手机浏览器中图片显示模糊的问题，并介绍了如何通过调整图片尺寸和利用CSS属性如devicePixelRatio及background-size实现高清显示的方法。

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

最近在用手机做网站的时候，发现，用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？

经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960*640分辨率，在网页里只显示了480*320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。
想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100*100，背景图必须得200*200，然后background-size:contain;，这样显示出来的图片就比较清晰了。

代码可以如下：

background:url(../images/icon/all.png) no-repeat center center;-webkit-background-size:50px 50px;background-size: 50px 50px;display:inline-block; width:100%; height:50px;

background-size:contain;或者指定都可以，大家试试！

要是还没有解决，就说明手机或者浏览器分辨率了。