Detectando el iPhone y el iPad con CSS

Se pueden detectar los distintos dispositivos y navegadores de muchas maneras (a nivel servidor con PHP, a nivel servidor con .htaccess, a nivel cliente con Javascript…) pero una muy efectiva es usar CSS.

A continuación os dejo las reglas CSS para usar distintos archivos de estilos según que dispositivo:

<link rel=”stylesheet” media=”all and (max-device-width: 480px)” href=”iphone.css”>
<link rel=”stylesheet” media=”all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)” href=”ipad-vertical.css”>
<link rel=”stylesheet” media=”all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)” href=”ipad-horizontal.css”>
<link rel=”stylesheet” media=”all and (min-device-width: 1025px)” href=”ipad-horizontal.css”>
Mejora el rendimiento de tu web
Te enseñamos cómo crear tu web con WordPress y cómo conseguir mucho tráfico en poco tiempo:
Crear un blog con WordPressPasa de 0 a 5.000 visitas en tu web

Un comentario

  1.   kuko dijo

    ¿Alguien puede confirmar que le ha funcionado?
    Yo lo he probado y ni con un iphone 4, ni con una HTC Magic (Android) me ha funcionado
    Saludos

Escribe un comentario