新版webkit內核支持srcset顯示高解析度

隨著Retina屏的出現,Safria率先支持了srcset,在響應式的網站中,各種尺寸的終端可以迅速調整圖片的大小,新版的webkit瀏覽器已經全面支持該屬性。

<img src="init-image.jpg" srcset="f-image.jpg 2x" />

開發人員只需提供一個備用的文件名(alternate filename)和倍數放大(resolution multiplier),比如1x、2x或4x。」Resolution Multiplier」是用來衡量」多少個物理像素組成』一個』像素點的方法」,例如iPhone 5的螢幕解析度為1136×640,但」顯示解析度」為568×320。這意味著4個物理像素組成了一個」顯示像素」,或稱」4x multiplier」。

這樣其中的一個好處是,持有高解析度顯示設備的用戶(典型的如蘋果設備的用戶)能很輕鬆得瀏覽那些能提供高質量圖片的網站,從而帶來很好的用戶體驗。與此同時,那些使用普通顯示解析度的用戶也不會因為網絡帶寬等問題而懊惱瀏覽高解析度圖片較多的網站,因為這些網站能提供適合他們觀看的圖片。

還有一種顯示方法,

<img src="init-image.jpg" srcset="f-image.jpg 480w" />

這裡的480w的意思表示最大viewport為480px的情況。

注意

那些不支持srcset的瀏覽器會直接忽略掉它,對用戶而言不會產生任何不良影響。

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場