Web móvil: Detectando cuando las imágenes se han desactivado

Question

Me he encontrado con un problema muy molesto para la web móvil. El sitio web que tengo usa imágenes para la mayoría de sus botones, ambos <a href="..."><img> y <input type='image'>. En consecuencia, si el usuario inhabilita las imágenes, el sitio web no solo no se ve bien, sino que también pierde toda la capacidad de navegar por el sitio. En particular, Android no muestra alt información en las imágenes, por lo que no hay nada que indique que las imágenes no se muestran.

¿Hay alguna manera de determinar si un navegador tiene imágenes desactivadas sin usar JavaScript? Me gustaría mostrar un sitio de texto optimizado más genérico si lo han deshabilitado.

Answer 1

¿Sin usar ningún JavaScript en absoluto? Me temo que no es posible, al menos en el lado del cliente.

En HTML hay etiquetas NOFRAME y NOSCRIPT, pero ninguna etiqueta equivalente para imágenes, cuyo contenido se mostraría solo si las imágenes se desactivaran o no fueran compatibles.

Luego, para las etiquetas A que envuelven una imagen, tal vez podría hacer que la etiqueta A, en lugar de su imagen, sea responsable de mostrar la información sobre herramientas y de manejar eventos.

Además, para garantizar que su diseño no se rompa si las imágenes no se cargan, puede asignar a la etiqueta A el ancho y alto normal de su imagen. Lo mismo también funcionaría para las etiquetas <input type='image'> envolviéndolas en una etiqueta span y dándoles valores de atributo correctos.

Por ejemplo:

<a href="..." style="height: 25px"; width: 80px;" title="Some tooltip text"> 
    <img...> 
</a> 

<span onclick="some action" style="height: 30px"; width: 70px;" title="Some other tooltip text"> 
    <input type='image'...> 
</span>