响应式图像分辨率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像素
• 等