Via Ajaxian, leo este fantástico artículo en el que nos dá algunos consejos para desarrollar para el iPhone.
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 😀
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 un ejemplo para los privilegiados que lo posean.
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.
<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 😀
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 usando textarea consiguen hacer que cuadrados se muevan por la pantalla 😀
Otras cosillas interesantes
Apple cree que únicamente hay que especificar una sola CSS. Y debido a que ingnora por completo el tipo handheld (dispositivos móviles) podemos usar cualquier otra como si de un navegador de escritorio se tratara.
<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:
<a href="tel:1-408-555-5555">1-408-555-5555</a>;- Mail:
<a href="mailto:frank@wwdcdemo.example.com">John Frank</a>- Google Maps
<a href="http://maps.google.com/maps?q=cupertino">Cupertino</a>- Incluir un video en nuestras aplicaciones
<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.
-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)
9 comentarios, 13 referencias
+
#