響應式圖像分辨率iPhone vs iPad

Question

我想使用srcset爲iPhone和iPad提供2張圖像，但2x描述符適用於兩者，圖像應該不同。

在這兩個設備上，圖像是全寬。但是在iPhone上，320瓦特的2x是640瓦特，在1024×1024的iPad Pro 2x上是2048瓦特。

我怎麼能區分兩者？

Answer 1

x描述符更適合跨視口固定寬度的圖像。

對於可變寬度圖像，應使用w描述符。

例如：

<img 
    src="image320.jpg" 
    srcset="image320.jpg 320w, image640.jpg 640w, image960.jpg 960vw, image1280.jpg 1280vw, image1600.jpg 1600vw, image1920.jpg 1920vw, image2240.jpg 2240vw, image2560.jpg 2560vw" 
    sizes="100vw"> 

的w描述屏幕密度係數適用於圖像的CSS寬度以獲得實際圖像的寬度下載。

的image1920.jpg圖像將被瀏覽器對若干配置被下載：

• 屏密度1與視口寬度等於或低於1920px
• 屏密度2與視口寬度等於或低於960像素
與視口
• 屏幕密度3寬度等於或低於640像素
• 等