En el pasado, cuando trabajaba en el lado de la PC, también encontraba problemas de compatibilidad, pero para ser honesto, todo lo que tenía en mente eran los problemas de IE y no había nada a lo que prestar especial atención. No era bueno resumiendo. Ahora estoy trabajando en el lado móvil (al principio pensé que el lado móvil era muy fácil, así que no lo tomé en serio), así que me equivoqué, ¡pagué por mi desprecio y arrogancia!
Recientemente, encontré algunos errores de compatibilidad y encontré información en Internet.
Hablemos primero de la ventana gráfica.
Plantilla primero
<meta charset=utf-8><!--El objetivo principal es forzar que el ancho del documento y el ancho del dispositivo permanezcan 1:1, con un ancho máximo de 1,0, y prohibir el escalado de la pantalla. --><meta content=ancho=ancho del dispositivo, escala inicial=1.0, escala máxima=1.0, escalable por el usuario=no nombre=viewport><!--Esta también es una etiqueta privada de iPhone, que permite pantalla completa hojeada. --><meta content=yes name=apple-mobile-web-app-capable><!--La etiqueta privada del iPhone, el estilo de la barra de estado en la parte superior del iPhone. --><meta content=black name=apple-mobile-web-app-status-bar-style><!--Desactivar la identificación automática de números como números de teléfono. Esto es más útil porque se mostrará una cadena de números. Como el azul, las adiciones de estilo a otros colores tampoco son efectivas. --><meta content=teléfono=sin nombre=detección de formato><!--Desactivar reconocimiento de correo electrónico--><meta content=email=no nombre=detección de formato>
Al escribir imágenes de fondo, es mejor agregar arriba a la izquierda o 0 0; de lo contrario, es fácil saltar al escribir efectos de movimiento.
Está prohibido copiar y seleccionar texto.
.el { -webkit-user-select: ninguno; -moz-user-select: ninguno; -khtml-user-select: ninguno;Hay un error en el posicionamiento fijo de los teléfonos móviles de Apple. Compruebe si el html y el cuerpo tienen overflow-x:hidden;
Establecer estilos especiales para teléfonos móviles con diferentes tamaños de pantalla
Pantalla solo @media y (ancho mínimo del dispositivo: 320 px) y (ancho máximo del dispositivo: 375 px) {}El soporte para los eventos de entrada del teclado keyup, keydown y keypress en IOS no es muy bueno. Sin embargo, es posible usar la entrada para monitorear el evento de pulsación del teclado en el navegador móvil Android, después de ingresar usando el método de entrada en el móvil iOS. navegador, la tecla no responde inmediatamente. Los eventos solo se pueden responder después de la eliminación.
Método: puede utilizar el evento oninput de html5 para reemplazar keyup
<tipo de entrada=id de texto=testInput><tipo de script=texto/javascript> document.getElementById('input').addEventListener('input', function(e){ valor var = e.target.value; });< /guión>La configuración del estilo del botón de entrada en iOS será anulada por el estilo predeterminado
La solución es la siguiente:
entrada, área de texto { borde: 0; -apariencia del kit web: ninguno;}El diseño flexible no admite el atributo flex-wrap:wrap para versiones inferiores de Android, pero el sistema ios admite el atributo de ajuste de línea. ¿Cómo resolver este problema? Por supuesto, no utilice saltos de línea y utilice otros métodos en su lugar.
.box{ display: -webkit-box; /* Sintaxis de la versión anterior: Safari, iOS, navegador Android, navegadores WebKit más antiguos */ display: -moz-box; -ms-flexbox; /* Sintaxis de versión mixta: IE 10 */ display: -webkit-flex /* Sintaxis de nueva versión: Chrome 21+ */ display: flex /* Sintaxis de nueva versión: Opera 12.1, Firefox 22+ */}El atributo de marcador de posición de entrada posicionará el texto hacia arriba
altura de línea: (la misma altura que el cuadro de entrada) ---Solución para PC
altura de línea: normal --- solución móvil
Después de ingresar tipo = número, aparecen flechas hacia arriba y hacia abajo en el lado de la PC
entrada::-botón-giro-exterior-webkit,entrada::-botón-giro-interno-webkit { -apariencia-webkit: ninguno! margen importante: 0;}Habilite los teléfonos móviles Android e iOS para abrir la cámara y seleccionar la función de álbum de fotos
<input class=js_upFile cover1 type=file name=cover Accept=image/* capture=camera multiple/>$(function () { //Obtenga el userAgent del navegador y conviértalo a minúsculas var ua = navigator.userAgent.toLowerCase( ) ; //Determina si es un teléfono Apple, de ser así, es verdadero var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); if (isIos) { $(input:file).removeAttr(capture };})Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.