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”>
¿Necesitas contratar un hosting para tu web?
En SiteGround tienes disponible una amplia oferta de hostings para todo tipo de bolsillos y necesidades. Encuentra el hosting que estás buscando al mejor precio, con las últimas tecnologías en velocidad y seguridad web y soporte en español 24h:
HostingHosting WordPress

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 *