1448 sujets

Web Mobile et responsive web design

Bon je sais que j'en demande beaucoup mais je n'arrive pas à comprendre comment fonctionne srcscet + sizes avec picturefill.js

Malgré des tests, une dizaine de tuto et recommandations des hautes sphères, je ne comprends pas, il y a qqch qui m'échappe (mes tests ne correspondent pas à la réalité décrite dans les articles).

Qqn utilise t il cette solution?

Ex:


<img 
         src="../img/logo-id/monimage.jpg"
                    
          srcset="../img/logo-id/monimage-tiny.jpg 320w,
                       ../img/logo-id/monimage-small.jpg 390w,
                       ../img/logo-id/monimage-normal.jpg 780w,
                       ../img/logo-id/monimage-nobig.jpg 1170w,
                        ../img/logo-id/monimage-big.jpg 1560w"
                            
                    sizes="100vw"
                    
                    alt="mon image">



Normalement, c'est simple: le browser doit prendre la taille la plus adaptée à la situation.
MAIS moi j'ai des gros soucis:

Par ex sur un mobile avec un écran de 320 px de large et une densité de pixel 1x => il prend pas "monimage-tiny.jpg 320w" mais "../img/logo-id/monimage-normal.jpg 780w"

Et si écran 320px avec densité de pixel 2x => il prend direct le "../img/logo-id/monimage-big.jpg 1560w"


Embêtant n'est ce pas???

Une idée?