Prepara tu sitio para iPhone

Impresionante la recopilación realizada por Cats who code sobre códigos con los que adaptar tu sitio a la visualización en iPhone. Como creo que es de un gran interés para desarrolladores y usuarios avanzados y que, por supuesto, son aplicables a WordPress, aquí los tienes con alguna adaptación a nuestro entorno:

Detectar iPhones e iPods usando Javascript

Al desarrollar para iPhone o iPod Touch lo primero que hay que hacer es detectarlo para que, luego, le apliquemos códigos o estilos. El siguiente código d etecta iPhones o iPods usando Javascript, y los redirige a una página  específica para iPhone.

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    if (document.cookie.indexOf("iphone_redirect=false") == -1) {
        window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
    }
}

Fuente: http://davidwalsh.name/detect-iphone

Detectar iPhones e iPods usando PHP

Aunque el código anterior funciona de maravilla puede que Javascript esté desactivado en el iPhone. Si fuera el caso puedes usar PHP para detectar iPhones o iPods Touch.

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
    header('Location: ');
    exit();
}

Fuente: http://davidwalsh.name/detect-iphone

Definir el ancho de iPhone como viewport

En muchas ocasiones visitas una web con tu iPhone y la ves en miniatura. La razón es que el desarrollador olvidó definir el viewport (o no sabe que existe). La declaración de width=device-width te permite definir el ancho del documento al ancho de la pantalla del iPhone. Las otras dos declaraciones son muy útiles si estás desarrollando un sitio  «solo para iPhone». En caso contrario puedes borrar estas dos declaraciones.
Definir un viewport es fácil: Simplemente inserta el siguiente meta en la sección «head» de tu sitio (fichero «index.php» de la plantilla activa):

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Fuente: 

Insertar un icono específico para iPhone

Cuando un usuario añade tu web a su página de inicio el iPhone usa una captura de pantalla de tu sitio como icono. Pero tu puedes ofrecer un icono específico, lo que es mucho mejor.
Definir un icono personalizado para iPhone es fácil: Simplemente pega el siguiente código en la sección «head» de tu sitio (fichero «index.php» de la plantilla activa). La imagen debe ser de 57px por 57px en formato .png. No tienes por qué añadir brillos o esquinas ya que el iPhone las añade automáticamente:

<rel="apple-touch-icon" href="images/template/engage.png"/>

Fuente: 

Evitar que Safari ajuste el tamaño de texto al rotar

Cuando rotas el iPhone, Safarie ajusta el tamaño de texto. Si por algún motivo prefieres evitar este efecto solo tienes que usar el siguiente CSS, que tendrás que añadir a tu hoja de estilos (fichero «style.css» de tu plantilla activa).
La declaración -webkit-text-size-adjust es una propiedad CSS exclusiva de webkit que permite controlar el ajuste de texto.

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}

Fuente: 

Detectar la orientación del iPhone

Como el iPhone permite ver la página en vertical o apaisdo puede que necesites detectar en qué modo el documento será visible.
Esta función Javascript detecta la orientación actual del iPhone y aplica una clase CSS específica para cada modo de orientación. Fíjate que en este ejemplo la clase CSS se añade al ID del  page_wrapper. Remplázalo por el nombre de ID deseado (línea 24)

window.onload = function initialLoad() {
    updateOrientation();
}

function updateOrientation(){
    var contentType = "show_";
    switch(window.orientation){
        case 0:
	contentType += "normal";
	break;

	case -90:
	contentType += "right";
	break;

	case 90:
	contentType += "left";
	break;

	case 180:
	contentType += "flipped";
	break;
    }
    document.getElementById("page_wrapper").setAttribute("class", contentType);
}

Fuente: 

Aplicar estilos CSS solo para iPhones/iPods

Si buscas un modo limpio de aplicar clases CSS solo para iPhone puedes usar el siguiente código:

@media screen and (max-device-width: 480px){
    /* Todo el CSS para iPhone va aqui */
}

Fuente: http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/

Redimensionar imágenes automáticamente para iPhones

En las webs actuales la mayoría de las imágenes suelen ser de un ancho superior a 480px. Al ser de este tamaño la pantalla del iPhone puede que las imágenes más grandes se vean incorrectamente, incluso destrozando el diseño de tu sitio.

Pues bien, usando el siguiente código CSS podrás redimensionar automáticamente las imágenes que sean de un ancho mayor de 480px, el ancho estándar del iPhone, con lo que nunca se verán más anchas y no desconfigurarán tu sitio al visualizarse en un iPhone.

@media screen and (max-device-width: 480px){
    img{
        max-width:100%;
        height:auto;
    }
}

Fuente: http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/

Ocultar la barra de tareas por defecto

La barra de tareas es útil pero a veces ocupa demasiado sitio, que vendría estupendo para mostrar mejor tu web. Si quieres que Safari oculte la barra por defecto cuando un usuario de iPhone visite tu sitio solo tienes que añadir el siguiente Javascript:

window.addEventListener('load', function() {
    setTimeout(scrollTo, 0, 0, 1);
}, false);

Fuente: http://articles.sitepoint.com/article/iphone-development-12-tips/2

Usar enlaces especiales

Al igual que con los enlaces «mailto», tan útiles para que te envíen emails, si se visualiza tu web con un iPhone puedes añadir otro tipo de enlaces que ejecutarán acciones, gracias a la función de teléfono de este miniordenador de bolsillo.

Si quieres ofrecer enlaces para que te llamen o te envíen un SMS puedes usar códigos html de este tipo:

<a href="tel:12345678900">Llámame</a>
<a href="sms:12345678900">Mándame un SMS</a>

Fuente: http://articles.sitepoint.com/article/iphone-development-12-tips/3

Simular la clase pseudo :hover

Como no se usa ratón en el iPhone no se utiliza la pseudo clase :hover. Sin embargo,  usando Javascript puedes simular la clase pseudo :hover cuando el usuario apoye el dedo sobre un enlace:
var myLinks = document.getElementsByTagName(‘a’);
for(var i = 0; i < myLinks.length; i++){ myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false); myLinks[i].addEventListener('touchend', function(){this.className = "";}, false); }[/js] Tras añadir el código anterior puedes aplicar algo de estilo CSS: [css]a:hover, a.hover { /* el efecto hover que sea*/ }[/css] Fuente: http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(2 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

27 comentarios en “Prepara tu sitio para iPhone”

  1. y digo yo: ¿no tendria que ser iphone quien se adaptase? al final vas a tener que hacer tu web para iphone, explorador de windowz, firefox, blackberry y algún otro chisme del futuro… lo gigo des de mi inopia… no se?

    1. Mira, no te falta razón uri. Al final esto es como la guerra de navegadores, que o diseñas para todos o pierdes audiencia y ¿alquien quiere perder audiencia de los lectores que se conectan a tu web desde un iPhone?, precisamente estos, los que te eligen para conectarse desde su móvil. Yo creo que no.

      Además, si hay un smartphone desde el que se navega bien es un iPhone, ahí tiene su lógica darle un trato preferente a la hora de que tu página se vea bien ahí (además de en los navegadores normales claro).

  2. Pingback: Diseño web para celulares | Cookieface

  3. Hola Fernando,

    La pregunta es, ¿será mejor tener una web o WordPress que además de poderse leer en un navegador de PC esté preparada para los terminales móviles, o tener una web para cada cosa, o sea, por poner un ejemplo, un WordPress con una plantilla para navegadores de PC y otro WordPress con una plantilla específica para navegadores móviles? Comento esto pues hay dominios específicos para este tema en concreto.

    No, si al final nos tendremos que comprar un iPhone 🙂 …vaya fregado…

    1. No hace falta Rasuji. Si configuramos bien nuestro WP podremos ofrecer a cada visitante la versión que mejor se adapta al dispositivo desde el que se conecte. Además, hay plugins que ofrecen versiones móviles si no se tienen ganas de tocar código.

      Y si, ¡cómprate ya un iPhone! 😀

  4. Pingback: Prepara tu sitio para iPhone

  5. El futuro de los móviles y portátiles es la completa fusión entre ambos.

    Está muy bien que nos vayamos preparando para lo que viene. 😉

  6. Rodrigo Moreno

    Hola precisamente ando en un iPhone y el blog se adapta de lujo, aunque creo que Apple debió dar menos trabajo a los webmasters y crear un Safari que se adaptara bien a cualquier página, ya que alratO también tendremos que adaptar las pagunas a la iPad y cada diapositivo que se lanze, lo cual se me hace excesivo trabajo. Como quiera que sea siempre hay desarrolladores de plugins que facilitan el trabajo de los mas flojos e inexprtos en el desarrollo de scripts

    1. Safari está basado en Webkit (Chrome también), de código libre, y el trabajo de verdad no lo da Safari sino IE y otros. De hecho ahora mismo ni Firefox es fiable (mucho menos para desarrolladores). No es esa la cuestión creo yo.

      Pero si que se debería seguir algún estándar para facilitarnos la vida.

  7. Solamente quiero agregar, AGUANTE OPERA, (si tambien en su versión para mobiles). Y lo de Firefox es cierto, se esta quedando atras con los estandares (y encima esta cada vez mas pesado).

  8. Hola, mi pagina está hecha totalmente en Flash y se que no es compatible con iphone.¿tendría que peparar otra versión para que se vea con el iphone y usar los codicos que describes para que se abrá la versión para el iphone?

    muchas gracias por tu blog que es muy ineresante para los disñadores casero como yo.

    1. este post es viejo pero yo ando metido en el tema ahora y te comento que lo mejor es que uses un sitio para el iphone o bien que realices tu sitio en xhtml, wordpress o algo compatible, será lo mas fácil para que muchas personas vean tu sitio.

  9. Buenas noches. Hago una pregunta porque estoy muy interesado en el tema.  Estos cambios aqui mencionados, debo hacerlos en un blog nuevo especial para iphone?  es decir,  yo tengo mi blog que es supongamos: http://www.pagina.com/blog  donde ya llevo tiempo, pero ahora tengo que hacer un blog especial para iphone? de modo que se llame http://www.pagina.com/iphone ??  Cada vez que cree posts nuevos tengo que actualizar en ambos??
    No hay forma de que a medida que ponga un post en mi blog original se actualize la version para iPhone?
    Sucede que no quiero instalar alguna aplicación como las que ya hay, quería saber si es posible hacerlo manualmente como comentan aqui en este post.

    Por favor espero una respuesta…  gracias!

  10. Hola, estoy buscando la misma respuesta, me parece buena la solución para un web estático pero que hay con los dinámicos, eh tratado de controlar los estilos con al regla @media:disqus pero al iphone no parece importarle mucho esto porque no funciona en mi web http://www.edupixel.com.mx&nbsp;
    si alguien tiene solución se le agradecerá mucho

  11. Hola, estoy buscando la misma respuesta, me parece buena la solución para un web estático pero que hay con los dinámicos, eh tratado de controlar los estilos con al regla @media:disqus pero al iphone no parece importarle mucho esto porque no funciona en mi web http://www.edupixel.com.mx&nbsp;
    si alguien tiene solución se le agradecerá mucho

  12. Hola! Mi pregunta es en qué archivo pongo el código para que las imágenes no se vean más grandes en el iphone (@media screen and (max-device-width: 480px){
            img{
                max-width:100%;
                height:auto;
            }
        }
    He probado en style.css pero sigue igual.

    Gracias por la información!

  13. Uy, pues yo no entendí dónde colocar
    @media screen and (max-device-width: 480px){
            img{
                max-width:100%;
                height:auto;
            }
        }

    Si lo hago en el archivo .css -entiendo que todas las reglas css irían dentro de
    @media screen and (max-device-width: 480px){
    .
    .
    .
    }

    Cuando veo la página en el explorador no carga el archivo.css y lo veo sin estilo… ¿sugerencias o ayudas?

    muchas gracias!! por lo demás he probado los tricks y el post es excelente! 😀

  14. Muchas Gracias por la información, me vendrá bien para mi web. Y si, es un rollo tener que desarrollar webs para cada uno de los navegadores. Aunque el más problemático es Internet Explorer.. 

  15. Hola, estoy empezando con mi blog, esta tarde me he instalado la  aplicación de wordpress en mi iphone, el problema es que ahora las imagenes en la versión de PC se ven muy grandes, no tengo ni idea de como restablecer la configuración. ¿Alguien me puede ayudar?

  16. jesushernandez9856

    Hola Francisco, muy bueno este tutorial, lo usare para mi WordPress. Me encanta esta página, me ha servido mucho de ayuda. He visto «Millones» de páginas de tutoriales de WordPress pero esta me parece mejor que todas las que he visto. Que buen trabajo tienes con Ayuda WordPress! Hasta aparece en la página de descarga de WordPress ( http://es.wordpress.org ) y me alegra de que sea así. En serio haces (más bien hacen, porque he visto que hay varios en el Staff) un buen trabajo. Por cierto, una cosa, ve, es que yo me registre para participar en el Staff de Ayuda WordPress. Pero cuando trato de acceder al escritorio, me dice que no tengo acceso a la página. Me ayudas? Mi usuario (como me registre para acceder) es jesushernandez9586 (bueno, sale aquí en los comentarios :D) y si necesitas contactarme escribeme a mi correo: [email protected] Te agradecería que me ayudaras!

  17. jesushernandez9856

    Hola Francisco, muy bueno este tutorial, lo usare para mi WordPress. Me encanta esta página, me ha servido mucho de ayuda. He visto «Millones» de páginas de tutoriales de WordPress pero esta me parece mejor que todas las que he visto. Que buen trabajo tienes con Ayuda WordPress! Hasta aparece en la página de descarga de WordPress y me alegra de que sea así. En serio haces (más bien hacen, porque he visto que hay varios en el Staff) un buen trabajo. Por cierto, una cosa, ve, es que yo me registre para participar en el Staff de Ayuda WordPress. Pero cuando trato de acceder al escritorio, me dice que no tengo acceso a la página. Me ayudas? Mi usuario (como me registre para acceder) es jesushernandez9586 (bueno, sale aquí en los comentarios :D) y si necesitas contactarme escribeme a mi correo: [email protected] Te agradecería que me ayudaras!

Deja un comentario

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

 

Ir arriba Ir al contenido