<img srcset... attribute consente all'utente di visualizzare immagini diverse a seconda della risoluzione dello schermo.Quali browser supportano l'attributo `<img srcset...>`?
Quali browser attualmente (gennaio 2013) supportano questo attributo?
Dato che questo è un utile attributo per gli utenti che navigano su smartphone, in aggiunta, quali browser mobili offrono supporto?
Aggiornato Feb 2014
ci sono vari aspetti srcset, tra cui densità di pixel e la larghezza viewport. Al momento della scrittura: non
ho messo un po 'di test file e risultati su un Github repo che cercherò di mantenere aggiornato.
WebKit [supporto aggiunto] (https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/) il 12 ago 2013. Ciò significa che probabilmente supporta Safari versione 7 (da Mavericks), ma non sono sicuro di Mobile Safari. – Nick
Ho aggiornato il mio repository Github. Non è ancora in Safari 7. Inoltre, noto [Surfin 'Safari] (https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image -attributo /) indica solo la densità dei pixel, non la larghezza della finestra. – Mike
FYI ... un altro articolo, [WebKit ha implementato srcset, ed è una buona cosa] (http://www.smashingmagazine.com/2013/08/webkit-implements-srcset-and-why-its-a-good-thing /) dal presidente del [Gruppo di comunità di immagini reattive] del W3C (http://responsiveimages.org). –
È interessante notare che, wikipedia sembra utilizzare srcset con gli attributi come questo:
srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Izokefalizm.jpg/300px-Izokefalizm.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Izokefalizm.jpg/400px-Izokefalizm.jpg 2x"
direi che stanno utilizzando un polyfill per raggiungere questo obiettivo, ma certamente sta visualizzando le immagini più grandi in modo corretto. Potrebbe valere la pena di girarci intorno.
Sì, è un polyfill, vedi http://www.mediawiki.org/wiki/Manual:$wgResponsiveImages e http://www.mediawiki.org/wiki/HiDPI_display_support – leo
un what-y-fill ti chiedi: http://elroyjetson.org/dev-notes/mobile/implement-responsive-images-with-a-polyfill –
Webkit è ora supporta l'attributo srcset: https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/
E (ad oggi) Chrome: http://blog.chromium.org/2014/02/chrome- 34-responsive-immagini-and_9316.html – fboes
per dispositivi iOS - Safari per iOS 8 ora supporta srcset - ma non sarà disponibile fino a quando l'autunno 2014.
http://friendfeed.com/christianoliff/c7c40ae2/safari-for-ios8-now-supports-img-srcset
ma solo la risoluzione '1x' e' 2x' e non la notazione 'w' –
Hanno un aspetto per il supporto corrente a CanIUse.com. A partire da ora, ottobre 2015, se non ti interessa tanto IE, puoi tranquillamente usarlo su praticamente tutti i browser, roba buona!
['caniuse.com'] (http://caniuse.com/#feat=srcset) è un'ottima fonte per * compatibilità con browser *. – cregox
Si tratta di una grande risorsa, ma l'immagine reale potrebbe essere diversa. – Rantiev