Che dimensioni dovrebbero essere le mie immagini per un sito mobile

Question

Stiamo progettando un modello per un sito mobile e abbiamo risolto il problema in cui non sappiamo quale dimensione dovrebbe essere un logo, o lo sfondo, ecc.

Useremo l'API mobile JQuery e HTML5/CSS3 che fondamentalmente ci consente di creare l'intera architettura del sito senza preoccuparci delle dimensioni, ma in termini di risorse esterne come sfondi e immagini non sappiamo quale sia la dimensione migliore per essere più compatibile con la maggior parte dei dispositivi.

Answer 1

L'iPhone 4S/5 ha uno schermo ad alta risoluzione largo 640 pixel. Molti smartphone Android raggiungono il massimo a 720px, anche se alcuni arrivano a 800px. Qualunque cosa sia considerata probabilmente una tavoletta.

La cosa migliore che puoi fare per quanto ampia compatibilità, quindi, è un singolo di stile CSS:

img { max-width: 100%; height: auto; } 

Questo farà sì che non importa ciò che la risoluzione dello schermo è, le immagini saranno non più grandi di l'elemento che lo contiene. (Quando crei un sito reattivo con gli utenti mobili in mente, le larghezze, i margini e il padding degli elementi dovrebbero essere calcolati come percentuali ogni volta che è possibile.) Ovviamente significa anche che stai scaricando più dati di immagine di quanti ne avranno bisogno, ma se si tratta di loghi bicolore, non fa molta differenza. Come sempre, mantieni le tue immagini il meno possibile e il più piccolo possibile.

Inoltre, se non hai a che fare con le foto, devi guardare le immagini SVG. Poiché sono basati su vettori, vengono ridimensionati perfettamente a qualsiasi risoluzione e they're compatible with pretty much every browser except IE8 and Android 2.x.

Answer 2

Per questo è necessario utilizzare le query multimediali CSS. Date un'occhiata di questo articolo qui: http://davidwalsh.name/image-max-width

/* iphone */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
     img { max-width: 100%; } 
} 

/* ipad */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
     img { max-width: 100%; } 
} 

Answer 3

Considerate seguente codice HTML:

<img src="images/myimage.jpg" alt="image"> 

Dare un'occhiata a questo esempio, avremmo bisogno di più immagini a seconda delle dimensioni dello schermo. Poiché la maggior parte dei browser guarda prima il documento HTML e precarica le immagini prima di caricare Javascript, Javascript non sarebbe una soluzione perfetta.

Ecco perché: utilizza un server di immagini reattivo!

Ho usato Sencha.io Src, che capire lo schermo del dispositivo e si restringono (è solo restringe immagini) la vostra immagine per adattarla suoi vincoli Screensize. Sencha.io usa la stringa useragent del browser per cercare il dispositivo nel suo database. Di quanto si riduce l'immagine alla larghezza massima del dispositivo e lo memorizza in una cache che sarà disponibile per 30 minuti.

Usalo così:

<img src="http://src.sencha.io./http://[your domain and path]/images/myimage.jpg" alt="image"> 

PS: Ha anche shortcomes: si basa sul rilevamento del dispositivo e richiede di instradare tutte le vostre immagini attraverso una terza parte. Ma poiché al momento non ci sono grandi soluzioni (anche con le query sui media dovrai occuparti dei browser, che scaricano risorse all'interno di una query multimediale che non si applica) - Spero che questo ti possa aiutare!

Answer 4

Sono sicuro che la dimensione dell'immagine normalmente non dovrebbe essere più come definisce CSS media query standart.

Questo è un breve elenco di query multimediali CSS per i dispositivi più popolari del 2015-2016.

Basta aggiungere in questo elenco i contenuti multimediali per i nuovi dispositivi se necessario.

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
/* Styles */ 
} 
/********** 
iPad 3 
**********/ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 
/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

/* iPhone 5 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6 ----------- */ 
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6+ ----------- */ 
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S3 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S4 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

/* Samsung Galaxy S5 ----------- */ 
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

E anche dare un'occhiata alle liste vecchie https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ e https://gist.github.com/hs0ucy/3762901