Resumen de algunos errores encontrados por la aplicación híbrida
La aplicación híbrida es una aplicación híbrida. En pocas palabras, abrir una aplicación web en una aplicación nativa equivale a proporcionarle un núcleo de navegador que puede abrir su página. Entonces el problema es si lo desea. Habrá muchos problemas de compatibilidad cuando las páginas web sean más interactivas. Los enumeraré a continuación. (Muchos de los siguientes errores no existen en los navegadores móviles, solo existen cuando se abren en la aplicación).
1. En el sistema iOS, es decir, en la aplicación Apple, ahora hay un botón. Al hacer clic en el botón, aparecerá un cuadro de texto que el usuario puede ingresar en el cuadro de texto. Para tener una mejor experiencia, haga clic en Cuando se presiona el botón, se agregará un evento de enfoque al cuadro de texto, de modo que el usuario pueda ingresar directamente después de hacer clic en el botón sin volver a hacer clic en el cuadro de texto. página, fallará fácilmente, especialmente position.: fijo. La obtención de eventos de enfoque invalidará el arreglo, lo que provocará problemas de diseño de página y una mala experiencia del usuario. La solución es intentar no utilizar el posicionamiento y utilizar absoluto si realmente lo necesita.
2. Si usa el diseño rem, puede haber confusión en el diseño de la página en Redmi, Samsung note4 y otros teléfonos móviles, así que use rem con precaución. Puede usar flex para el diseño móvil. Si usa rem, solo puede ajustar el tamaño de su elemento raíz poco a poco. Puede usar navigator.userAgent para obtener el modelo de teléfono y proporcionar un tamaño de fuente separado para teléfonos incompatibles.
3. El mismo es el diseño rem. Si el borde de su proyecto usa unidades rem, no se mostrará en algunos teléfonos Android. Simplemente use px como unidad.
4. El atributo line-height se muestra incorrectamente en teléfonos Android. Por ejemplo, si desea centrar una línea de texto verticalmente, la forma más sencilla es establecer line-height a la altura de la etiqueta. donde se encuentra el texto, pero en teléfonos Android Habrá problemas y la solución es configurar la altura de línea por separado para los teléfonos Android. La altura de línea estándar original en mi proyecto es 0,5 rem, pero en Android la configuré en 0,35 rem. Hay muchas soluciones en línea, pero no son muy confiables.
5. Si tiene el requisito de que el usuario pueda buscar después de escribir en el cuadro de texto y luego presionar Enter, encontrará un problema, es decir, es posible que la tecla de búsqueda en el teclado no muestre la palabra. "Buscar". Dos palabras, como Apple, muestran "siguiente elemento" y algunas muestran "avance de línea". Esta experiencia no es muy buena. Algunas personas se confundirán si no ven el botón de búsqueda después de escribir. gire el teclado Es necesario cambiar la palabra de la tecla Intro para buscar. La solución es envolver el cuadro de texto con una etiqueta de formulario.
6. Si desea utilizar la animación c3 en el terminal móvil, debe agregar el prefijo -webkit-; de lo contrario, la animación fallará en los teléfonos Android. Por supuesto, iOS no es un problema.
7. Para los eventos de clic, todos sabemos que habrá un retraso de 300 milisegundos en el terminal móvil. Es mejor usar eventos táctiles en el terminal móvil en lugar de eventos de clic, pero personas como yo lo hacemos. acostumbrado a usar clic, y si se abre en un navegador móvil, el evento de clic se puede ejecutar normalmente y no se puede ver el efecto de retraso, al menos yo no lo he visto, por lo que puede usar clic directamente. Si desea abrirlo en una aplicación, el retraso del evento de clic es muy obvio. Solución Además de cambiar todos los eventos de clic a eventos táctiles, existe otra solución que utiliza el complemento fastclick, puede borrar el retraso de 300 milisegundos. del evento de clic.
8. Los eventos de activación o desactivación de teclas se utilizan a menudo al realizar búsquedas en el terminal móvil, pero habrá problemas de compatibilidad en iOS. Algunos de los teclados que vienen con iOS no activan eventos de teclado, como se muestra a continuación. Escribí zhang. Hay una fila de palabras para seleccionar en la parte superior del teclado. Esta parte no activa eventos de teclado, por lo que si selecciono la palabra "zhang", no activará la búsqueda. error. Este tipo de error no existe en los métodos de entrada de terceros, pero también hay muchos usuarios de iOS que usan sus propios teclados, por lo que aún debe resolverse. La solución es reemplazar el evento de teclado con el evento de cambio de propiedad de entrada. Por ejemplo: reemplazar $('. search').keyup(function(){}) se reemplaza por $('.search').on('input propertychange',function(){}). El método js nativo, que es oninput, similar a onclick, puede monitorear el contenido del cuadro de texto en tiempo real. (Este error aparecerá tanto en los navegadores como en las aplicaciones móviles).
Antes de escribirlo, sentí que podía hablar mucho y encontré muchos problemas, pero cuando lo escribí, parecía que no había muchos en este momento. Decidí escribirlo de improviso, por lo que no pude recordar muchos de ellos a la vez. Los anteriores son relativamente comunes. Hay un problema de compatibilidad y se actualizarán en el futuro.
Este artículo proviene de: Li Qing (LeeSin), el número uno de Hunan. No podemos decir que Hunan sea el número uno. Eso sería una locura. Hunan es probablemente el más fuerte.