响应式图像分辨率 iPhone vs iPad

【问题标题】：Responsive image resolution iPhone vs iPad响应式图像分辨率 iPhone vs iPad
【发布时间】：2017-06-08 16:36:54
【问题描述】：

我想使用srcset 为 iPhone 和 iPad 提供 2x 图像，但 2x 描述符适用于两者并且图像应该不同。

在两个设备上，图像都是全宽的。但是在 iPhone 2x 上 320w 是 640w 而在 iPad Pro 上 2x of 1024 是 2048w。

如何区分两者？

【问题讨论】：

错过了<picture> 标签。好像是这样工作的。

标签： iphone html ipad responsive-images srcset

【解决方案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，视口宽度等于或小于 1920 像素
屏幕密度为 2，视口宽度等于或小于 960 像素
屏幕密度为 3，视口宽度等于或小于 640 像素
等

【讨论】：