解决在手机浏览器下背景图标模糊的问题

最近在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常。大概知道是分辨率适配等类型的问题,后来网上查找了一些办法,大部分的解决方案都是设计一套放大1倍的图标,再压缩显示。

我们都知道<img>标签可以通过固定宽高的方式来压缩大图,从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧,css3出了一个很牛逼的属性 background-size 可以直接设置背景图的宽高,直接解决了前者的疑惑。

那么问题来了,我们的网页不可能每个图标都独立一张图片来加载,那样每张图片将会是一个http请求开销,我们一般的做法是把多张小图片拼在一张大图里,然后通过sprite(精灵)background-position定位的方法来解决,只要加载一张大图,就可以完成多个图标的显示,减少http请求开销,提高性能。所以,我们也希望把放大1倍的高清图标也拼在一张大图里,通过background-position来定位到每个对应的图标上,并进行压缩。网上找了很多方法,终于找到了一个靠谱的方案:

1、首先,我们要准备两张排成一行(必须排成一行,下面会解释)的图片,一张是原始大小,另一张是放大1倍的大小

这张小图叫:(map-icon.png)

解决在手机浏览器下背景图标模糊的问题

这张大图叫:(map-icon@2x.png)

解决在手机浏览器下背景图标模糊的问题

2、最初的写法,主要是在电脑浏览器上显示,我们使用原图 map-icon.png 即可

/*  
//网页标签:  
<a class="control"><span class="car"></span></a>  
<a class="control"><span class="position"></span></a>  
*/  
  
/* 装载图标的容器,固定宽高,内距设为0 */  
.control{ display: block; text-decoration: none; padding: 0; width: 30px; height: 30px; }  
  
/* 图标标签,宽高自动填充 */  
.car,  
.position,  
.zoom-in,  
.zoom-out{  
    display: block;   
    width: 100%;   
    height: 100%;   
    background: url(images/map-icon.png) no-repeat;  
}  
.car { background-position: 0 0; }  
.position { background-position: -30px 0; }  
.zoom-in { background-position: -60px 0; }  
.zoom-out { background-position: -90px 0; }

3、问题是,我们怎么知道background-size属性值要设置为多少?后来找到有一个公式:

高分辨率图像宽度 / 目标图像宽度 = X  
原始Sprites图像宽度 / x = background-size的宽度值

好吧,公式的原理我们就不在这里展开了,直接写上去试试:

60 / 30 = 2  即放大倍数

7张60x60的大图总宽度 420

420 / 2 = 210  即background-size的宽

而background-size的高,我们这里设置为auto即可,然后换上@2x的大图进行压缩

还有,我们必须在外层声明一个Media Queries,该Media Queries专门针对Retina屏幕设备显示器

/* 移动端媒体查询像素比 */  
@media only screen and (-webkit-min-device-pixel-ratio: 2),  
only screen and (min--moz-device-pixel-ratio: 2),  
only screen and (-o-min-device-pixel-ratio: 2/1),  
only screen and (min-device-pixel-ratio: 2) {  
    .car,  
    .position,  
    .zoom-in,  
    .zoom-out {  
        background: url(images/map-icon@2x.png) no-repeat;  
        background-size: 210px auto;  
    }  
    /* 注意这里还是按30像素大小的位置来查找 */  
    .car { background-position: 0 0; }  
    .position { background-position: -30px 0; }  
    .zoom-in { background-position: -60px 0; }  
    .zoom-out { background-position: -90px 0; }  
}

相反,貌似也可以给定高度的值,宽度取auto自适应,但我尝试过,不太容易成功。我们以后就直接用一行图标排开,给背景图宽赋值就行了!

最后,给出使用此方案的前后效果图:

处理前:

解决在手机浏览器下背景图标模糊的问题

处理后:

解决在手机浏览器下背景图标模糊的问题


原文链接:HelloWeb前端网 » 解决在手机浏览器下背景图标模糊的问题 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享