Problemas de compatibilidad del navegador móvil

Al desarrollar el proyecto del centro comercial móvil, aparecieron algunos problemas que no se habían visto antes en el proceso de implementación de funciones y manejo de errores, y los registré aquí.

1. Respuesta retardada de 300 ms al evento de clic en el terminal móvil IOS

Hay un retraso de 300 ms para las páginas web en dispositivos móviles, y jugar con ellas provocará un retraso en el clic del botón o incluso un error en el clic. Esto se debe a la razón histórica para distinguir entre eventos de un solo clic y zoom de pantalla con doble toque, javascript

En 2007, Apple lanzó el primer safari equipado con el sistema IOS en el iPhone. Para mostrar mejor las páginas web adecuadas para la pantalla grande en el terminal de PC en el terminal móvil, utiliza un doble toque para hacer zoom (doble toque para hacer zoom ) solución. Abra una página web en la PC con un navegador en el teléfono móvil. Es posible que vea que, aunque el contenido de la página puede ocupar toda la pantalla, las fuentes y las imágenes son demasiado pequeñas para verlas con claridad. En este momento, puede Haga doble clic rápidamente en una determinada parte de la pantalla y podrá ver claramente el contenido ampliado de esta parte y podrá volver al estado original después de hacer doble clic nuevamente. CSS

Tocar dos veces para hacer zoom se refiere a tocar dos veces rápidamente la pantalla con el dedo, y el navegador Safari que viene con iOS ampliará la página web a la proporción original. HTML

La razón radica en cómo el navegador necesita juzgar el clic rápido: cuando el usuario hace clic en un elemento de la pantalla, como un enlace de salto.Aquí el navegador capturará primero el clic, pero el navegador no puede decidir si el usuario simplemente hace clic en el enlace o hace doble clic en la parte del área a ampliar, por lo que después de capturar el primer clic, el navegador primero mantendrá presionado por un período. de tiempo. Si el usuario no realiza el siguiente clic dentro del intervalo de tiempo t, el navegador realizará el procesamiento de conexión de clic para saltar. Si el usuario hace clic por segunda vez durante el período de tiempo t, el navegador prohibirá el salto y, en su lugar, realizará una operación de zoom en la página en esta parte del área. Entonces, ¿cuánto es este intervalo de tiempo t? En IOS Safari, son unos 300 milisegundos. De ahí viene el retraso. El resultado es que el usuario simplemente hace clic en la página y la página tarda un poco en responder, lo que le da al usuario una experiencia lenta. Para los desarrolladores web, el procesamiento de la función de devolución de llamada del evento de clic de captura de la página js tarda 300 ms en surtir efecto. que es indirecto. Como resultado, afecta el procesamiento de otra lógica empresarial.

solución:

• fastclick puede resolver el retraso de 300 ms del evento de clic en el teléfono móvil
• El módulo táctil de zepto, el evento tap también sirve para resolver el problema del retraso al hacer clic.

La secuencia de respuesta del evento táctil es touchstart -> touchmove -> touchend -> clic. También puede vincular el evento ontouchstart para acelerar la respuesta al evento y resolver el problema de retraso de 300 ms.

2. En algunos casos, el evento de clic se monitorea para detectar elementos en los que no se puede hacer clic, como (etiqueta, intervalo), y no se activará en ios.

solución:

• css agrega cursor:puntero y listo.

3. Se puede hacer clic en ingresar, seleccionar, y otros elementos debajo de la capa de máscara de los teléfonos móviles Samsung y enfocarlos (haga clic para penetrar)

El problema se encontró en los teléfonos móviles Samsung y esto solo sucederá bajo necesidades específicas, por lo que si no tiene problemas similares, puede ignorarlo. El primer requisito es la operación de capa flotante. Los elementos enmascarados en Samsung aún pueden enfocarse, hacer clic y cambiar). Hay dos soluciones:

• Después de mostrar la capa, agregue el control de nombre de clase correspondiente y corte el evento que puede obtener el elemento de enfoque debajo de la capa de visualización para obtener git
• Al agregar el atributo deshabilitado al elemento enfocable, también puede usar el atributo más el método de bloqueo dom (un método de transformación de deshabilitado)

4. El cuadro de entrada en la parte inferior de h5 está bloqueado por el teclado.

Hay un problema muy doloroso en la página h5: cuando el cuadro de entrada está en la parte inferior, el cuadro de entrada se bloqueará después de hacer clic en el teclado virtual. Se puede resolver de las siguientes maneras

let oHeight = $(document).height(); //浏览器当前的高度
   
   $(window).resize(function(){
    
    
 
        if($(document).height() < oHeight){
    
    
         
        $("#footer").css("position","static");
    }else{
    
    
         
        $("#footer").css("position","absolute");
    }
   });

5. El navegador WeChat de Android necesita interacción para activar el evento de estado.

Después de usar History.pushState() para agregar registros, hacer clic hacia atrás activará el evento de estado, pero en el navegador WeChat de Android, debe generar un comportamiento interactivo y hacer clic hacia atrás para activar el evento de estado.
solución:

• Diseñar una interacción en la página que necesita activar el estado.