Resumen
Recientemente, en el desarrollo de H5, descubrí que hay algunos pozos en H5 durante el proceso de desarrollo, por lo que resumiré los pozos y las soluciones encontradas durante el proceso de desarrollo. Este artículo se actualizará continuamente y todos pueden comentar y compartir encuentros de desarrollo de H5. Pozos, soluciones, etc.
Problemas comunes de desarrollo general de H5
Problemas de desarrollo IOS-H5
· El método de entrada oculta la página en blanco
Fenómeno del problema: después de que el teclado virtual en el lado de iOS pierde el foco (oculto), la página no se recuperará y quedará un bloque blanco del bloque de método de entrada en la parte inferior de la página.
Solución: Después de que el teclado virtual se retraiga (oculte), desplace la página y los bloques en blanco desaparecerán. Por lo tanto, siempre que se complete la operación de "desplazamiento" después de completar la entrada, el problema puede resolverse.
Solución de desarrollo React (React Hook): (parte de implementación de código)
// Ingrese el teclado para ocultar el rebote
useEffect (() => {
document.addEventListener ( ' focusout ' , function (e) {
let u = navigator.userAgent;
let isiOS = !! u.match (/ \ (i [^; ] +; (U;)? CPU. + Mac OS X /); // terminal ios
if (isiOS) {
window.scrollTo ( 0 , 0 );
}
})
}, [])
Problemas de desarrollo de Android-H5
· Problema de nivel de video
Fenómeno problemático: al hacer clic en la ventana emergente de inicio de sesión se puede mostrar normalmente. Después de hacer clic para reproducir el video, el nivel de video se convierte en el nivel más alto. Al hacer clic nuevamente en la ventana emergente de inicio de sesión, el video bloquea la pantalla. .
Solución: El navegador integrado de Android WeChat es el núcleo X5, y el nivel de video predeterminado en el núcleo X5 es el nivel más alto, por lo que no hay forma de cambiar la visualización de la jerarquía cambiando el índice z. Al usar la etiqueta de video, puede agregar el atributo de x5-video-player-type = 'h5-page'. En este momento, el video en H5 está habilitado con la misma capa del reproductor H5, para que pueda ajustar el video, la ventana emergente, etc. Visualización jerárquica.
Solución de desarrollo de React: (parte de implementación de código)
< video
id = " player "
controls = { true }
width = " 100% "
height = " 100% "
x5 -video-player-type = " h5-page " // Habilita la misma capa H5 player
x5-video-orientación = " paisaje | retrato " // El video gira automáticamente con el teléfono
>
<source src = {videoUrl} type = " video / mp4 " />
</ video>
Código de estilo CSS:
video {
object-fit: fill;
object-position: center;
}