Algunos problemas finales móviles

1, la máscara gris translúcido ios elemento del sistema se genera cuando un toque cómo quitar

ios usuario hace clic en un enlace, habrá una máscara gris traslúcido, si quieres desactivar, conjunto webkit-tap-culminante color fijó último valor alfa bit es 0, es decir, es 0 se puede quitar el valor de la propiedad translúcido gris máscara de
un botón, de entrada, área de texto { -webkit-tap-culminante color: RGBA (0,0,0,0;)}

2, forma webkit entradas para cambiar el valor de color de marcador de posición

input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEEEEE;} 

3, webkit texto del cuadro de formulario de entrada de marcador de posición puede envolver

iOS pueden, androide no ~
en el área de texto de la etiqueta puede envolver ~

4, que prohíbe ios mucho tiempo y no se activa el menú del sistema, ios prohibición desde hace mucho tiempo y android descargar imágenes

.css{-webkit-touch-callout: none} 

5, prohíbe ios y los usuarios de Android seleccionar el texto

.css{-webkit-user-select:none} 

6, la mensajería de texto de teléfono para escribir e-mail la forma de lograr

打电话:    <a href="tel:0755-10086">打电话给:0755-10086</a> 发短信,winphone系统无效 <a href="sms:10086">发短信给: 10086</a> 写邮件: <a href=“mailto:[email protected]">[email protected]</a> 

7, el botón analógico efecto hover

El efecto del tacto extremo móvil de un botón, el usuario puede expresar algo estaba a punto de suceder, es una relativamente buena experiencia, pero el dispositivo móvil y ningún puntero del ratón, utilizan la posición de CSS no se ajusta a nuestras necesidades, pero afortunadamente hay un externo Active el terminal móvil efecto activo de CSS.

1, añadido directamente en la ontouchstart cuerpo, el mismo efecto de la terminal móvil puede activar el css activo y más recomendada de esta manera (compatibilidad IOS5 +, + parte. 4 Android, WinPhone. 8)
2, para lograr de forma totalmente compatible, atando ontouchstart y ontouchend dado al nombre de la clase de los botones de control

8, los elementos de audio y elementos de video no se reproducirá automáticamente con Andriod y ios

Las opciones de respuesta: pantalla táctil-play

 $('html').one('touchstart',function(){ audio.play() }) 

9, la eliminación de la pantalla de bienvenida de transición

Las redes están escritos de manera, pero yo no probarlo

.css{
    /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
    -webkit-transform-style: preserve-3d; /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/ -webkit-backface-visibility: hidden; } 

10, active la aceleración de hardware

1, página resolver el destello blanco
2, para asegurar una animación suave

.css {
    -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 

11, cancelar el tiempo de entrada en iOS, introduzca la primera letra en mayúscula por defecto

<input autocapitalize="off" autocorrect="off" /> 

12, androide quitar el botón de entrada de voz

input::-webkit-input-speech-button {display: none} 

13, ventana de la página H5 se ajusta automáticamente a la anchura del dispositivo, y evita que los usuarios página has

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 

14, haciendo caso omiso de la página de identificación digital para el número de teléfono

<meta name="format-detection" content="telephone=no" /> 

15, haciendo caso omiso de la plataforma Android en el reconocimiento de la dirección de correo electrónico

<meta name="format-detection" content="email=no" />


Autor: Tiempo de vida cada vez mayor personalidad
enlace: https: //www.jianshu.com/p/afbec9ae84e7
Fuente: libros de Jane
tienen derechos de autor por el autor. reimpresión comercial póngase en contacto con el autor autorizada, reimpresión no comercial por favor indique la fuente.

Supongo que te gusta

Origin www.cnblogs.com/fs0196/p/12553271.html
Recomendado
Clasificación