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”>

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

Deja un comentario

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