今天幫客戶定制網(wǎng)站，發(fā)現(xiàn)一個(gè)奇怪的問(wèn)題，就是logo圖片或者圖標(biāo)定的大小是139*55，然后logo圖片我們就把他處理成這個(gè)大小。

按道理不存在放大縮小的問(wèn)題。但是實(shí)際上電腦端沒(méi)有問(wèn)題。很清楚，手機(jī)端他看起來(lái)就是有點(diǎn)模糊，

然后我開(kāi)始把他轉(zhuǎn)成svg矢量圖。還是模糊，于是找資料也沒(méi)找到。

然后我就把logo圖片直接用大圖。不去處理成55高度，發(fā)現(xiàn)直接用大圖然后css控制大小，然后格式改成了webp。就沒(méi)問(wèn)題?？s小后就很清晰。

至于什么原理。目前還不知道。

大概的原因是：

一、核心原因?

1. ?設(shè)備像素比（dpr）不匹配?

• 手機(jī)屏幕dpr通常為2或3（如Retina屏），若圖片分辨率未按dpr縮放，1個(gè)圖片像素會(huì)被多個(gè)物理像素分?jǐn)倢?dǎo)致模糊
  。

• ?例?：dpr=2的設(shè)備需提供2倍分辨率的圖片。

2. ?圖片源文件質(zhì)量不足?

• 圖片尺寸過(guò)小被強(qiáng)制放大
  ，或過(guò)度壓縮導(dǎo)致細(xì)節(jié)丟失（常見(jiàn)于JPEG反復(fù)保存）
  。

• 淺色/低對(duì)比度圖片縮放時(shí)易出現(xiàn)細(xì)節(jié)模糊6。

3. ?技術(shù)實(shí)現(xiàn)問(wèn)題?

• CSS未精確控制圖片尺寸（如background-size未適配容器）。

• 響應(yīng)式布局中橫屏/豎屏切換未適配
  。

• 瀏覽器自動(dòng)壓縮圖片（常見(jiàn)于淘寶等平臺(tái)）
  。

• ?