Detectar iPhone y aplicar estilos usando HTML o Javascript

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)

Hack safari mobile

Firefox

Hack safari mobile en Firefox

Internet Explorer

Hack safari mobile en Internet Explorer

Safari (Windows)

Hack safari mobile en Safari

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

  1. Hola, he tratado de entender un poco esto de como generar el código para que mi pagina web se lea de una forma en un explorador de pc o mac y que cambie la forma para cuando se axede desde un iphone o un ipad, pero que pena, no entiendo, tengo mi pagina, un poco sencilla, y como es en html desde dreamweaver se ve desde un iphone y ipad, pero deseamos pasar la pagina por flash, se que flash no lee en iphone, entonces que debo hacer? hacer otra pagina web con formato de iphone y adicionarle unas lineas a mi html para que scuando reconozca iphone b}vaya a otro lado?, te agradezco la ayuda. gracias, stevens tabares,

    • MI recomendación es que realices el diseño del sitio web desde cero, utilizando un framework de desarrollo como Foundation o Bootstrap que son muy faciles de utilizar y que luego de utiilizarlos obtendrás un sitio web listo para móviles, tablets y computadoras.

      Para el efecto en relieve de las letras te recomieno que revises 3D CSS text Generator

      • Muchas gracias (me uní a vos por el twitter), te seguiré preguntando cositas (si no es molestia), entre otras te cuento que he dejado mi empleo fijo y estoy haciendo de mi trabajo, diseñador gráfico, mi vida, me canse que otros se queden con el billete; pero la impresión no creo que sea el futuro, entonces toca por este lado. Si yo en mi calidad de diseñador te puedo ayudar en algo, acá tenes mi correo, quedo muy agradecido con tu ayuda y apenas tenga algo te lo enseño, las criticas siempre son excelentes consejeras.

        Gracias

        Stevens, Colombia,

        Pd. de donde sos vos.

      • Excelente iniciativa de volverte independiente, es un camino complicado pero recomenpensa por mucho el esfuerzo. No te he visto en Twitter, ¿cuál es tu usuario?

        Por cierto, soy de Guatemala.

Comments are closed.