Gotchas / errores en el desarrollo de WebKit en iOS o Android

He encontrado algunas cosas en mis esfuerzos recientes con el iPad.

1: Versión 4.2 iOS tiene un error en el que se ejecuta demasiados document.getElementById ('foo'); Causará el retraso del navegador, y por lo tanto no ejecutar comandos correctamente. Para remediar esto, necesita crear variables que contengan esta información y sólo haga los comandos de selección cuando sea necesario. Sin embargo, la versión 4.3 de iOS soluciona esto, ya que la he probado en mi iPad.

2: Al trabajar con el posicionamiento, he encontrado que al crear su propio controlador de vídeo (para html5), si intenta cambiar el tamaño del contenedor de vídeo utilizando position: relative o position: absolute, ya no verá un vídeo, sino un Bonita pantalla negra (con sonido!). Con el fin de remediar esto, sólo tiene como objetivo el marco de padre y que está bien para ir.

3: Si está utilizando iScroll asegúrese de poner un tiempo de espera en tener que cargar; Especialmente si tiene algunos otros javascripts en la página como aunque el documento lo tiene cargando cuando 'la página se carga' a través de:

 // Load iScroll when DOM content is ready. document.addEventListener('DOMContentLoaded', loaded, false); 

He tenido este fracaso, y no pude averiguar por la vida de mí por qué mi div no fue el tamaño correctamente mostrarme todos los elementos, pero los dos últimos y no desplazamiento. En su lugar simplemente hice un

 $(function(){ //other page loaded items to do //the iScroller init setTimeout('iScrollerInit();',200); }); 

Y arregló el problema muy rápidamente.

4: Si encuentras que tus clics no funcionan correctamente, he descubierto que muchos de los SDKs móviles son elementos vinculantes en todo, por lo que es difícil conseguir clics para las cosas que normalmente deseas. Así que para arreglar esto usted puede hacer algo como:

 $("#yourId").unbind("click").click(function(){ //what to do when clicked }); 

Y he encontrado esto para trabajar más brillante.

**UPDATE - Nov 2012 **: It's been a few years, and there is so much more to add to this so wanted to update the list a bit.

5: El Javascript es costoso en un puñado de dispositivos AÚN (diciembre de 2012). Hacer cosas que manipulan el DOM genera una buena dosis de retraso en los dispositivos y debe tener mucho cuidado al hacer estas cosas. Usted querrá asegurarse de probar sus páginas Web móviles en los dispositivos más antiguos de Android y iPhone dispositivos más antiguos como de nuestros métricos estos son todavía bien utilizados dispositivos.

6: Si está pasando HTML para cargar en una vista web en un dispositivo (aplicación para iPhone o Android), hay momentos en los que verá casi una altura 0. Lo que debe hacer es que su iPhone o la aplicación de Android hagan una Javascript llama a la página real que apunta a una div para comprobar la página offsetHeight que permitirá entonces que la altura de la webview se establezca con precisión.

**UPDATE - Dec 2012 **: Few more awesome findings

7: He descubierto que al orientar sus divs para eventos de clics, los navegadores móviles esperarán 300 ms antes de activar el evento, creando efectivamente un retraso. Hacen esto para confirmar que el clic no fue un doble toque. Con el fin de evitar esto se puede obligar eventos touchend en su lugar que se disparará al instante!

Aquí hay un poco de código

 $(document).ready(function() { $('#element').bind('touchstart', function(event) { event.stopPropagation(); event.preventDefault(); $(this).toggleClass('hover_heading'); }); $('#element').bind('touchend', function(event) { event.preventDefault(); $(this).toggleClass('hover_heading'); }); }); 

Entonces, una vez que vea parpadeando sucediendo sobre sus artículos use esto para quitar eso.

 body * { -webkit-tap-highlight-color: rgba(0,0,0,0); } 

También si usted desea comprobar hacia fuera un artículo excepcional google escribió en esto usted puede verlo aquí: – Creación de botones rápidos para las aplicaciones web móviles

**UPDATE - Feb 2013 **: Few more awesome findings

8 : Cuando versiones de sus archivos CSS y el almacenamiento en caché de ellos con urls como: mydomain.com/css/styles.css?v=123 (o algo más), tenga cuidado en los dispositivos de Android 2.2 y anteriores, ya que esto obliga a comportamiento extremadamente extraño.

De mis descubrimientos androide hará que este completamente equivocado, y la fuerza de la html a ser incluso desordenado. La mejor manera al trabajar con estos dispositivos más viejos es tristemente cambiar el nombre real del archivo.

Esperemos que estos resultados ayudar a otros como he luchado a través de cada uno de estos problemas durante varias horas rascarse mi cabeza 🙂

No sé de una lista compilada, pero puedo enumerar algunos:

• SVG no se admite (actualmente) en Android, ya que se ha desactivado. El apoyo viene en Honeycomb. En contraste, iOS ha dejado el soporte SVG habilitado y parece funcionar bien.
• Aunque ambos navegadores admiten la opacidad de CSS3, asegúrese de probar minuciosamente cualquier animación, ya que puede ser muy débil para gráficos más complejos (especialmente con múltiples capas de opacidad).
• En mi javascript, normalmente escucho los eventos de "touchstart", "touchmove" o "touchend" por el bien de la velocidad (el evento de "clic" típicamente provoca un retraso notable) y granularidad.
• Las características de HTML5 como localStorage y las nuevas etiquetas de audio y video parecen funcionar bien. Sin embargo, en el iphone no se puede reproducir audio o video, ya que el evento de reproducción (y la descarga correspondiente) debe ser activado directamente por el usuario.
• Las transiciones que implican movimiento (cambiar coordenadas x e y) son bastante lisas. En contraste, las transiciones que implican la opacidad pueden ser bastante agitado dependiendo de los recursos implicados (a veces usted puede ser que tenga que utilizar un sprite para conseguir una sensación más lisa.)

Sólo algunas observaciones rápidas.

Hace poco escribí una entrada en el blog sobre algunos de los cotchas con el uso de un marco html5 – en mi caso Sencha Touch para crear una aplicación nativa envuelta en PhoneGap.

http://www.moneytoolkit.com/2011/05/the-problem-with-sencha-touch-and-phonegap/

3D webkit en android está roto, especialmente cuando se trata de cualquier cosa relacionada con los campos de entrada.

http://code.google.com/p/android/issues/detail?id=13048

Ha habido algunas ocasiones en las que he estado tratando de rastrear el comportamiento aleatorio de CSS y eventualmente se reduce a -webkit-transform:translate3d(0,0,0); En un elemento superior (para habilitar la aceleración de hardware en los dispositivos iOS).

position: fixed no funciona.

La sección móvil de QuirksMode probablemente será muy útil.

Bueno, hay un fallo molesto en Android donde el ajuste del cursor o la selección con Javascript no tiene ningún efecto real sobre dónde ocurre la entrada.
Le hice una pregunta al respecto y la conclusión fue que se trataba de un error de navegador :(, sucede en 2.2 y 2.3.

Enfoque la zona de texto con el cursor tras el texto en el navegador de Android

Dos "características" que he encontrado:

1. Los cuadros de entrada no responden a eventos táctiles (ontouchstart, ontouchmove, ontouchcancel), lo que significa que ontouchmove = "event.preventDefault ()" no impedirá que la página se desplace si está creando una aplicación de página fija y no desplazable. (Es posible crear una solución alternativa klunky usando divs ocultos.)

2. Es imposible usar autofocus o element.focus () en cualquier campo de formulario de WebKit, ya sea en Android o iOS. El elemento recibirá un cursor, pero el teclado no aparecerá. Todavía estoy tratando de construir una solución para esto, pero por el momento es una limitación intencional conocida. 🙁

Blockquote en eventos de clic de iOS no se propagan hacia arriba al elemento de cuerpo sobre elementos, excepto en algunos casos (enlaces, entradas, elementos con eventos adjuntos, etc.)

Esto me ayudó enormemente – gracias.

Un elemento UX que ha surgido en las pruebas de usuario de nuestra aplicación web es que la interacción iOS para elementos selectos es pésima. Requiere 3 clics: 1) haga clic en el elemento selector, 2) haga clic en el elemento que desea seleccionar, 3) haga clic en Listo. Y no hay ningún evento que pueda encontrar que se dispare cuando haga clic en Listo. Por lo tanto, para las listas cortas, puede ser mejor crear su propio menú emergente u otra interacción.

Overflow: scroll no es compatible con android 2.3

Usted tiene que hacer manualmente su desplazamiento divs (touchmove + scrollTop cambio) si están en contenedores

Hay un error desagradable donde las cajas selectas en Android 2.3 no se activarán si, o su contenedor, se ha ocultado en cualquier momento

http://code.google.com/p/android/issues/detail?id=10280