¿Puede una hoja de estilo para dispositivos de mano de salto de cargar imágenes

Question

Tengo una hoja de estilo para equipos de sobremesa, y otro para dispositivos de mano. La página web muestra algunas imágenes cuando se muestra en el escritorio, pero que oculta las imágenes cuando se muestran en dispositivos de mano. La página aparece como diseñado tanto para ordenadores de sobremesa y portátiles.

Cuando compruebo los registros del servidor, me parece que la mano está en realidad todavía cargando las imágenes, pero no los muestra. ¿Hay una manera de detener la mano de cargar las imágenes en su totalidad, ya que no los necesita, sin tener que mantener dos conjuntos de páginas web? ¿Se puede hacer uso de hojas de estilo sólo?

Gracias de antemano.

Ray Mond

Answer 1

Incluir las imágenes que no desea mostrar en los dispositivos móviles como imagen de fondo. En la hoja de estilo del navegador a continuación, puede utilizar

.element { 
    background: #FFF url('image.png') no-repeat left top; /* or whatever */
}

mientras que en la hoja de estilo de mano simplemente no se configura una imagen de fondo, por lo que, dependiendo del uso exacto, se puede usar

.element {
    display: none;
}

o

.element { 
    background: #FFF;
}

Sin embargo, no será posible eliminar las imágenes que incluya con <img src="" /> posteriormente a través de reglas CSS (solo display: none etc, pero que no se dejen de carga, como notado).

Answer 2

Enviar su hoja de estilo por encabezado HTTP antes de el marcado:

Link: <compact.css>; rel="stylesheet"; media="handheld"

A continuación, el navegador del dispositivo móvil más utilizado - Opera - no cargar las imágenes. WebKit (Safari) todavía lo hace, sin embargo - incluso imágenes de fondo para los elementos ocultos