Cargar estilos css según el dispositivo

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

En estos tiempos cada vez es más común ver sitios web adaptados a diferentes dispositivos y sus muchas y variadas resoluciones de pantalla. Ya que la experiencia de usuario no es la misma cuando entramos a una web desde un dispositivo móvil como: Iphone o Ipad a cuando lo hacemos desde una gran pantalla como puede ser el ordenador de la habitación o la televisión de alta resolución del salón. Es necesario estudiar las posibilidades de crear varias hojas de estilo para que nuestra web se muestre de la mejor forma posible en los diferentes dispositivos.

Estos son los diferentes tipos de etiquetas que son aceptadas por w3c:

all: es el fichero CSS cargado para todos los dispositivos.
screen: por defecto, para monitores de ordenador normales.
print: para impresión.
aural: sintetizadores de voz.
handheld: asistentes personales (PDA’s)
braille: máquinas capaces de reproducir formato braille para personas invidentes.
embossed: para imprimir texto en braille.
projection: proyectores y transparencias.
tty: terminales.
tv: televisores.

Se puede establecer el dispositivo de dos formas, cuando se hace la llamada al css en el código:

<link rel=”stylesheet” type=”text/css” href=”estilo_pordefecto.css” media=”screen”>
<link rel=”stylesheet” type=”text/css” href=”estilo_iphone.css” media=”handheld”>

o desde la propia hoja de estilos CSS:

@media screen {
body { font-size: 12px; }
}
@media handheld {
body { font-size: 10px; }
}

La mejor forma de conocer a nuestros usuarios es fijarse en las estadísticas de nuestra web, por norma general cualquier sistema de estadísticas que utilicemos muestra información muy completa sobre los dispositivos con los que los usuarios acceden con mayor frecuencia a nuestra web.

2 comentarios

  1. 8 Mayo, 2012
    Responder

    […] relacionado con lo anterior está el siguiente artículo donde se explica cómo cargar estilos CSS según el dispositivo. Accesibilidad Web, Programación Web Etiquetas: movil, php, […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.