Trucos y consejos para desarrollar para el iPhone

15-nov-2008, 16:55

Via [Registrate para ver el link. ], leo este fantástico artículo en el que nos dá a[Registrate para ver el link. ].

Deshacerse de la toolbar

Al parecer la toolbar en la que mostramos la hora, estado de la conexión y batería, molesta un poco … pues la eliminamos

Code:

window.onload = function() {
  setTimeout(function(){window.scrollTo(0, 1);}, 100);
}

¿Y si giramos el movil?

Un problema que las páginas web tendrán con el nuevo iphone es el del giro del móvil, ya que si este pasa de vertical a horizonal cuando la página ya ha cargado, esta no se redimensiona, por consecuente tendremos que controlar este punto. Joe Hewitt ha montado [Registrate para ver el link. ]

Code:

addEventListener("load", function() {
    setTimeout(updateLayout, 0);
}, false);

var currentWidth = 0;

function updateLayout() {
    if (window.innerWidth != currentWidth)  {
        currentWidth = window.innerWidth;
        var orient = currentWidth == 320 ? "profile" : "landscape";
        document.body.setAttribute("orient", orient);
        setTimeout(function(){
            window.scrollTo(0, 1);
        }, 100);
    }
}

setInterval(updateLayout, 400);

Meta viewport

Debido a la resolución de pantalla que el iPhone posee, algunos están investigando con el meta viewport.

Code:

<meta name="viewport" content="width=480; initial-scale=0.6666; maximum-scale=1.0; minimum-scale=0.6666" />

View Source

Como la versión de Safari para iPhone (ni de cualquier navegador para cualquier movil) dispone de la posibilidad de ver el código fuente, tendremos que montarlo mediante javascript

Code:

javascript:var%20sourceWindow%3Dwindow.open%28%27about%3Ablank%27%29%3B%0Avar%20newDoc%3DsourceWindow.document%3B%0AnewDoc.open%28%29%3B%0AnewDoc.write%28%27%3Chtml%3E%3Chead%3E%3Ctitle%3ESource%20of%20%27%2Bdocument.location.href%2B%27%3C/title%3E%3Cmeta%20name%3D%22viewport%22%20id%3D%22viewport%22%20content%3D%22initial-scale%3D1.0%3B%20user-scalable%3D0%3B%20maximum-scale%3D0.6667%3B%20width%3D480%22/%3E%3Cscript%3Efunction%20do_onload%28%29%7BsetTimeout%28function%28%29%7Bwindow.scrollTo%280,1%29%3B%7D,100%29%3B%7Dif%28navigator.userAgent.indexOf%28%22iPhone%22%29!%3D-1%29window.onload%3Ddo_onload%3B%3C/script%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/html%3E%27%29%3B%0AnewDoc.close%28%29%3B%0Avar%20pre%3DnewDoc.body.appendChild%28newDoc.createElement%28%22pre%22%29%29%3B%0Apre.appendChild%28newDoc.createTextNode%28document.documentElement.innerHTML%29%29%3B

Drag & Drop

Pese a los problemas con eventos de ratón, la gente está agudizando el ingenio y [Registrate para ver el link. ]

Otras cosillas interesantes

Apple cree que únicamente hay que especificar una sola CSS. Y debido a que ingnora por completo [Registrate para ver el link. ]) podemos usar cualquier otra como si de un navegador de escritorio se tratara.

Code:

<link media="only screen and (max-device-width: 480px)"
    href="iPhone.css" type="text/css" rel="stylesheet" />

Para el <meta name="viewport" /> nos aconseja una serie de parámetros.

width: Por defecto 980. Rango [200,10.000].
height: Por defecto calculado en base a la anchura. Rango [223,10.000].
initial-scale, es la escala de rendirezaje cuando la página carga por primera vez. Por defecto toda la página. Rango [minimum-scale, maximum-scale].
user-scalable, determina si el usuario puede o no escalar la página. Defecto yes (SI).

Al igual que con el PC, podemos hacer que nuestras aplicaciones interactuen con las demás opciones del teléfono.

Llamada telefónica:

Code:

<a href="tel:1-408-555-5555">1-408-555-5555</a>;

Mail:

Code:

<a href="mailto:frank@wwdcdemo.example.com">John Frank</a>

Google Maps

Code:

<a href="http://maps.google.com/maps?q=cupertino">Cupertino</a>

Incluir un video en nuestras aplicaciones

Code:

<EMBED SRC="poster.jpg" HREF="movie.m4v" TYPE="video/x-m4v" TARGET="myself" SCALE="1" ...>

La redimensión del texto es algo que en los dispositivos moviles se ha de tener muy en cuenta, por eso iPhone dispone de -webkit-text-size-adjust para hara conseguir que esta propiedad sea posible.

Code:

-webkit-text-size-adjust: [none|auto|x%]

Las imagenes tambien deben de ser tenidas en cuenta ya que no podemos olvidar de que es un movil.
Formatos soportados:

GIF (hasta 2mb)
PNG (hasta 8mb)
TIFF (hasta 8mb)
JPG (hasta 128mb)

fuente [Registrate para ver el link. ]

Herramientas	Buscar en esta discusión
Versión para imprimir Enviar por correo	Buscar en esta discusión: Búsqueda avanzada
Estilo
Modo lineal Cambiar a modo híbrido Cambiar a modo de árbol