De qué tamaño debe ser mis imágenes de un sitio móvil

Question

Estamos diseñando una plantilla para un sitio móvil y llegamos al problema por el que no se sabe qué tamaño debe ser un logotipo o el fondo, etc.

Usaremos la API móvil de Jquery y HTML5/CSS3 que básicamente nos permite crear toda la arquitectura del sitio sin preocuparnos por las dimensiones, pero en términos de recursos externos, como fondos e imágenes, no sabemos cuál es el mejor tamaño para ser más compatible con la mayoría de los dispositivos.

Answer 1

El iPhone 4S/5 tiene una pantalla de alta resolución de 640 píxeles de ancho. Muchos teléfonos inteligentes con Android superan los 720 px de ancho, aunque algunos llegan a 800 píxeles. Todo lo demás probablemente se considere una tableta.

Lo mejor que se puede hacer en cuanto a la compatibilidad amplia, entonces, es un solo estilo CSS:

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

Esto asegurará que no importa lo que la resolución de la pantalla es, las imágenes serán más grandes que el elemento que lo contiene (Cuando construya un sitio receptivo con usuarios móviles en mente, los anchos, márgenes y relleno de su elemento deben calcularse como porcentajes siempre que sea posible). Obviamente, también significa que está descargando más datos de imágenes de los que muchos teléfonos necesitarán, pero si lidiar con logotipos de dos colores, no hay mucha diferencia. Como siempre, mantenga sus imágenes lo menos y lo más pequeñas posible.

Además, si no se trata de fotos, debería mirar las imágenes SVG. Como están basados ​​en vectores, cambian de tamaño perfectamente a cualquier resolución, y they're compatible with pretty much every browser except IE8 and Android 2.x.

Answer 2

Tiene que usar consultas de medios CSS para esto. Tome un vistazo de este artículo aquí: 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

Considere código HTML siguiente:

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

Echando un vistazo a ese ejemplo, necesitaríamos varias imágenes en función del tamaño de la pantalla. Como la mayoría de los navegadores miran primero el documento HTML y cargan las imágenes antes de que carguen Javascript, Javascript no sería una solución perfecta.

Es por eso que: utiliza un servidor de imágenes receptivo.

He usado Sencha.io Src, que se darán cuenta de la pantalla del dispositivo y reducir el tamaño (se encoge única imágenes) su imagen para adaptarse a sus limitaciones ScreenSize. Sencha.io usa la cadena de caracteres de navegación de navegadores para buscar el dispositivo en su base de datos. Luego encoge su imagen al ancho máximo de su dispositivo y la almacena en un caché que estará disponible durante 30 minutos.

Se usa así:

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

PS: También tiene que shortcomes: se basa en la detección de dispositivos y requiere desviar todas las imágenes a través de un tercero. Pero ya que no son una gran solución en este momento (incluso con las consultas de los medios, tendrás que lidiar con los navegadores, que descargan recursos dentro de una consulta de medios que no se aplica) - ¡Espero que esto te ayude!

Answer 4

Estoy seguro de que el tamaño de la imagen normalmente no debería ser más como define el estándar de consulta de medios de CSS.

Esta es una breve lista de consulta de medios CSS para los dispositivos más populares de 2015-2016.

Simplemente agregue a esta lista medios que desea para nuevos dispositivos si es necesario.

/* 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 */ 
} 

Y también echar un vistazo a las listas de más edad https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ y https://gist.github.com/hs0ucy/3762901