為什麼本來電腦上看圖片是清楚的 但在手機瀏覽器上看會變得模糊?

網頁設計

有人問: 做的手機網站,在PC看ICON很好,在手機上看,ICON糊糊的

早期在作網頁時,只要把IE搞定後,就算All Pass了,但隨著瀏覽器大戰下,現在IE不再有絕對的優勢,使得身為網頁設計人員,電腦中安裝七、八個瀏覽器是很合情合理的,好不容把這些瀏覽器都搞定後,現在又多了行動裝置,而行動裝置除了平台不同外,現在連解析度也是五花八門,再加上iPhone的Retina,讓畫面解析變更高,影像更細緻,而這也苦了網頁設計人員,當用傳統的方式作好後,卻會發現到在高解析的手機中,影像卻是糊的

手機上雖然縮放以後顯示寬高變小了,但是DPI比桌面高很多,一般桌面上默認都是72。如果你在桌面上用一般默認的設置做一個320×480的圖,放到手機上,因為DPI差太多,就會顯得不清楚。

簡單來說在 PC 上正好的圖片,手機上其實是經過 1.5~2倍縮放后才顯示在網頁上,自然會看起來模糊了

所以為手機端準備的圖片,一般要比 PC 上的圖片大 1.5~2倍才能清晰顯示,之後再控制顯示出來的尺寸,這樣就能解決問題了

 

Post a comment

 

Loading...