Hace dos días les mostraba cómo crear un campo de texto con botón de borrar incluido, en ese ejemplo tuve que distinguir entre Safari de Safari Mobile (iPhone/iPod Touch) porque aunque ambos usan webkit aún muestran pequeñas diferencias en la forma de mostrar el HTML y CSS.

Detectar iPhone y aplicar estilos usando HTML

La forma de detectar el iPhone usando HTML y aplicar los estilos adecuados la descubrí en “CSS, JavaScript and XHTML Explained” .

Con un hack en la etiqueta <Link>

El hack consiste en agregar un estilo a través de la etiqueta link con un media type especial

<!--[if !IE]>–>
<link media="only screen and (max-device-width: 480px)" type="text/css" rel="stylesheet" href="iphone.css" />
<!–<![endif]–>

Only screen es detectado por la mayoría de navegadores mientras que (max-device-width: 480px) solo por el iPhone y iPod Touch. De esta forma la hoja de estilo solo es cargada por el iPhone/iPod Touch. Se añaden los comentarios condicionales para Internet Explorer, porque según comentan en el blog original, algunas versiones de Internet explorer cargan la el estilo para iphone.

Con un hack en la etiqueta <style>

De la misma forma anterior se puede aplicar el estilo necesario en la etiqueta Style directamente, de esta forma

<style media="only screen and (max-device-width: 480px)" type="text/css">
  .texto{color:blue;}
</style>

Detectar iPhone y aplicar estilos usando Javascript

La forma de detectar el iPhone con Javascript la utilice en el ejemplo anterior del campo de texto, y aunque es funcional es un poco más complicada que la anterior y requiere de Javascript.

if(navigator.platform=="iPhone"||navigator.platform=="iPod"){
 document.write('<style> texto{color:blue;};</style>’);
}

En este caso use la variable platform del objeto navigator de Javascript, que en el caso del iPhone devuelve “iPhone” y en del iPod Touch “ipod”.

Demo

Los dejo con algunas capturas del resultado del segundo método en diferentes navegadores, para el ejemplo: Safari Mobile, Firefox, IE y Safari.

Safari Mobile (iPod Touch)

Firefox

Internet Explorer

Safari (Windows)

El ejemplo lo encuentras en http://webdebolsillo.com//sandbox/hacks-safari-mobile/