## 安卓浏览器看背景图片，有些设备会模糊 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ `devicePixelRatio`作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以**苹果**当初把iPhone 4的960*640分辨率，在网页里只显示了480*320，这样devicePixelRatio＝2。**安卓手机**devicePixoRadio比较乱，有1.5的，有2的也有3的。想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况下都是2倍），或者指定`background-size:contain`;都可以 例如一个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;` 用-webkit-min-device-pixel-ratio可以做到不同倍数不同尺寸的图片： ``` .icon-logo{ background-image: url(src/assets/logo.png); width: 24px; height: 24px; background-size: contain; } @media screen and (-webkit-min-device-pixel-ratio: 2) { .icon-logo { background-image: url(src/assets/logo@2.png); } } @media screen and (-webkit-min-device-pixel-ratio: 3) { .icon-logo { background-image: url(src/assets/logo@3.png); } } @media screen and (-webkit-min-device-pixel-ratio: 4) { .icon-logo { background-image: url(src/assets/logo@4.png); } } ```