[Transferir] Preguntas comunes de entrevistas móviles 1: Soluciones compatibles con dispositivos móviles
Debido a que la resolución del teléfono móvil es demasiado pequeña, si la página web se muestra de acuerdo con la resolución, las fuentes serán muy pequeñas. El dispositivoPixoRadio de los teléfonos Android es bastante confuso, incluidos 1.5, 2 y. 3. Si desea que la imagen se muestre más claramente en el teléfono móvil, debe usar una imagen de fondo 2x en lugar de la etiqueta img (generalmente 2x), o especificar el tamaño de fondo: se pueden usar ambas
Android3 e iOSi5 admiten la nueva propiedad CSS3 overflow-scrolling
Establezca el valor alfa en 0 puede eliminar esta máscara gris transparente. Nota: El valor del atributo transparente no es válido en Android.
Método 1: agregar ontouchstart al cuerpo
Método 2: JS vincula el evento touchstart o touchend al documento
En el terminal móvil, si configura un píxel en El elemento Si el borde es grande, se verá más grueso que un píxel en el teléfono móvil.
Solución: utilice elementos de pseudoclase para simular bordes y utilice escalado de transformación
Algunos teléfonos móviles de gama baja no admiten css3mask y se pueden actualizar y degradar selectivamente
Por ejemplo, puede usar el juicio js para hacer referencia a diferentes clases:
Las fuentes en la PC se muestran normalmente, pero en el dispositivo iOS real, las fuentes de etiquetas como h1 y span son relativamente grandes .
Las esquinas redondeadas de algunos teléfonos Android fallan background-clip: padding-box;
En el terminal móvil, el evento de clic es efectivo, pero habrá una respuesta retrasada de 300 ms después. el clic
Motivo: Safari fue el primero en crear este mecanismo, porque en el terminal móvil, el navegador necesita esperar un período de tiempo para determinar si la operación del usuario es un clic o un doble clic. haga clic, por lo que hay un mecanismo de retraso de clic de 300 ms. Android pronto lo tendrá
En lugar de hacer clic, use un toque de evento personalizado
El toque debe personalizarse: si el usuario ejecuta touchstart y activa touchend en poco tiempo, y la distancia entre los dos tiempos es muy pequeña y no se puede resolver
Introduzca la biblioteca fastclick para resolver el problema
En el terminal móvil, el procesamiento de imágenes debe ser muy cauteloso. Supongamos que hay una imagen en sí. El tamaño máximo solo puede ser su propio ancho
img{
max-width: 100; p>
display: block;
margin: 0 auto;
}
Por ejemplo:
El div es un máscara absolutamente posicionada y el índice z es mayor que a. La etiqueta a es un enlace en la página Vinculamos el evento tap al div:
Cuando hacemos clic en la capa de máscara, el div desaparece normalmente, pero cuando hacemos clic en la capa de máscara en la etiqueta a, encontramos que el enlace a se activa, este es el llamado evento de punto de acceso.
Motivo:
el inicio táctil es anterior al final táctil y anterior al clic.
Es decir, la activación del clic se retrasa. Este tiempo es de aproximadamente 300 ms, lo que significa que la capa de máscara se oculta después de que se activa nuestro toque. En este momento, el clic no se activó. Después de 300 ms, debido a que la capa de máscara estaba oculta, nuestro clic activó el enlace a continuación.
Solución:
1. Intente utilizar eventos táctiles para reemplazar los eventos de clic. Por ejemplo, utilice el evento touchend (recomendado)
2. Utilice fastclick
3. Utilice preventDefault para evitar el clic de la etiqueta a