Detectar ipad & iphone con CSS

Usando CSS3 Media Queries podemos detectar el navegador, y portanto cargar una determinada hoja de estilos para cada dispositivo.

Para detectar el ancho utilizamos la propiedad device-width para controlar la altura junto con los prefijos min/max para controlar la altura mínima o máxima.

Un ejemplo para detectar iphone o ipad:

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad_horizontal.css">

Un ejemplo de detectar con CSS la orientación de la pantalla (vertical o horizontal) en el ipad y cargar un estilo u otro:

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

Otras propiedades:

• height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• scan
• grid