Résolution d'image réactive iPhone vs iPad

Question

Je souhaite utiliser srcset pour fournir deux images pour iPhone et iPad, mais le descripteur 2x s'applique aux deux et les images doivent être différentes.

Sur les deux appareils, l'image est pleine largeur. Mais sur iPhone 2x de 320w est 640w et sur iPad Pro 2x de 1024 est 2048w.

Comment faire la différence entre les deux?

Answer 1

Le descripteur x est plus adapté aux images dont la largeur est répartie entre les fenêtres.

Pour les images de largeur variable, vous devez utiliser le descripteur w.

Par exemple:

<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"> 

Le descripteur w applique le facteur de densité de l'écran à la largeur CSS de l'image pour obtenir la largeur d'image réelle à télécharger.

Le image1920.jpg image sera téléchargé par le navigateur pour plusieurs configurations:

densité de l'écran
• 1 avec une largeur de fenêtre égale ou inférieure à 1920px
densité de l'écran
• 2 avec une largeur de fenêtre égale ou inférieure à 960 x
• densité de l'écran 3 avec une largeur de fenêtre égale ou inférieure à 640px
• etc.