puedo donde directo como celular cargar cargador css css3 mobile page-load-time

css - donde - Al usar consultas de @media, ¿un teléfono carga consultas e imágenes no relevantes?



como cargar un celular directo (3)

El comportamiento depende del navegador, pero iOS Safari y Android Chrome respetarán las consultas de los medios y solo descargarán las imágenes de fondo para las consultas de medios aplicables.

Si desea inspeccionar este comportamiento, intente cargar la página con Mobitest ( http://mobitest.akamai.com/ ) o con un dispositivo conectado.

Si utiliza archivos CSS separados (y yo no lo recomendaría) el navegador descargará cada uno de ellos, incluso si no los necesita, esta es una limitación de CSSOM. Algunos navegadores, por ejemplo, los basados ​​en WebKit y Blink priorizan las hojas de estilo, de modo que las que se necesitan para representar la página se descargan primero y las demás en algún momento posterior.

Una cosa a tener en cuenta es la pantalla: ninguna en las imágenes de contenido, ya que no impedirá la descarga en muchas situaciones. Tim Kadlec explora esto más aquí: timkadlec.com/2012/04/media-query-asset-downloading-results

Si baso mi CSS en el diseño de dispositivos móviles, entonces uso consultas de @media para pantallas gradualmente más grandes (tabletas, computadoras de escritorio, etc.). ¿Los dispositivos móviles usarán los estilos de escritorio?

Creo que, por lo general, los dispositivos móviles cargarán todas las imágenes, incluso si no se aplican a su tamaño de medio de comunicación particular. Lo que significa que cargará todas las imágenes y ocultará las que no coincidan con su hoja de estilo basada en consultas.

Lo que intento hacer es usar un fondo para la versión más grande del sitio:

.splash { background: #1a1a1a url(''/assets/imageLarge.png'') no-repeat; }

y otro para la versión móvil:

.splash { background: #1a1a1a url(''/assets/imageSmall.png'') no-repeat; }

Si aplico el CSS móvil antes de cualquier consulta de medios, y agrego el CSS multimedia más grande a continuación usando una consulta como @media screen and (min-device-width: 481px) {...} , ¿los dispositivos móviles cargarán la imagen grande también?

Esto parece que dependería en gran parte del navegador, pero me imagino que cualquier navegador móvil que merezca la pena intentará reducir el uso de datos al no cargar imágenes (y posiblemente no cargar hojas de estilo completas) que están marcadas como no aptas para él. Además, muchos navegadores móviles prefieren no ser reconocidos como navegadores móviles. Sé que odio cuando abro un sitio en mi iPad y una hoja de estilo móvil me obliga a ver una delgada página del sitio de una sola columna en mi pantalla de 9.7 ".

Entonces las consultas de los medios no son confiables, pero aún así valen la pena (realmente no duelen nada, siempre y cuando se usen de manera responsable), y eso no ayuda a lo que es una pregunta bastante obtusa (pero aún buena); tiempo para hacer algunas pruebas!

La mayoría de los navegadores de escritorio modernos vienen empaquetados con herramientas de desarrollador. Mi favorito actual es el inspector web oscuro y bonito de FireFox (la vista 3D es especialmente para morirse). Pero, ¿qué pasa en Mobile? Las partes más grandes de su audiencia móvil no estarán en los navegadores que vienen con herramientas de desarrollo.

Bueno, tienes un par de opciones:

  • Firebug Lite tiene algunos resultados mixtos en navegadores móviles, pero es una elección excelente en la mayoría de los casos donde otros inspectores no están disponibles. Sin embargo, parece funcionar en iOS y otros navegadores móviles con soporte HTML5.
  • Esta pregunta sugiere usar algo llamado "weinre". Nunca lo he usado, pero parece lo suficientemente legítimo.
  • Si está de acuerdo con la orientación de algunos navegadores determinados, muchos NO incluyen herramientas de desarrollador. ¡Como Google Chrome para Android !

Elija lo que elija, estará buscando un visor de activos de algún tipo; tal vez una vista de línea de tiempo. Cualquier tipo de herramienta que le permitirá ver lo que cargó la página, en qué orden lo cargó y cuánto tiempo le tomó cargar.

¡Buena suerte!