En la empresa participé en un proyecto de desarrollo mixto de APP nativa y h5. Fui responsable de la parte h5 del proyecto. Resumiré los problemas encontrados en el proyecto de la siguiente manera:
preguntas especificas Pregunta 1: Problema con la barra de desplazamiento de la páginaDescripción del problema
La página web tiene barras de desplazamiento cuando se navega en un navegador de PC; sin embargo, cuando se abre en un navegador móvil, no hay barra de desplazamiento.
Solución
Establezca la capa más externa de la página (cuando escribo una página, generalmente escribo un contenedor grande en la etiqueta del cuerpo para almacenar el contenido de la página y no puedo establecer el valor del atributo de altura (); altura: 100% De ninguna manera tampoco)
ejemplo
<body> <div style=overflow:scroll/auto;> //Contenido de la página web</div></body>Pregunta 2: Uso de eventos touchstart y touchend
Descripción del problema
Cuando se introduce el archivo touch.js y se utilizan los eventos touchstart y touchend para lograr efectos interactivos, el problema de falla en la activación del evento ocurre en algunos teléfonos móviles [por ejemplo: teléfonos móviles Honor de versión baja]
Solución
Método 1: utilizar removeEventListener y addEventListener juntos
Método 2: agregue e.preventDefault(); para evitar que algunos teléfonos móviles salten de forma predeterminada
Método 3: Jquery implementa el enlace de eventos
Nota: El método 1 y el método 2 son JS nativos y usan addEventListener para implementar la escucha de eventos y cuando el elemento dom usa eventos touchstart y touchend, debe usarse junto con el enlace de eventos o la escucha de eventos; de lo contrario, la parte js generará un error. excepción.
código
//Método 1: document.getElementById('list5').addEventListener('touchstart',callback, false);document.getElementById('list5').removeEventListener('touchstart',callback, false);document.getElementById(' list5').addEventListener('touchend', devolución de llamada, false);document.getElementById('list5').removeEventListener('touchend',callback, false);//Método 2: document.getElementById('list5').addEventListener('touchstart',function(e){ e. prevenirDefault();}, false);document.getElementById('list5').addEventListener('touchend',function(e){ e.preventDefault();}, false); Pregunta 3: Problema de bloqueo al presionar prolongadamenteRestauración de escenarios
Hay una página de lista XXX Al mantener presionado un elemento de la lista en la página de la lista (tocar texto), se producirá un bloqueo en los teléfonos móviles de versión baja.
Solución
parte js: agregue e.preventDefault(); cuando se activa el evento para evitar el comportamiento predeterminado
parte css: agrega código que prohíbe la copia de texto
código
//parte js: e.preventDefault(); //parte css: -webkit-touch-callout: none; //Solución para bloquear //Deshabilitar la copia -moz-user-select: none;-khtml-user-select: ninguno;selección de usuario: ninguno;Pregunta 4: Problema con 1px en terminal móvil
Descripción del problema
Dado que diferentes teléfonos tienen diferentes densidades de píxeles, 1 px en CSS no equivale a 1 px en dispositivos móviles. En el proyecto, js y rem se utilizan para la adaptación de la pantalla del móvil, por lo que se produce una situación de 0,5 px, lo que hace que la versión inferior del teléfono móvil no pueda mostrar el borde de 0,5 px.
Solución
Use css para resolver el problema de 1px y escriba directamente: border-width:1px en el elemento dom que debe configurarse en 1px;
código
//parte HTML: <div class='class1'></div>//parte css: .class1{ border: 1px solid #ccc;}//parte css/*Problema con visualización normal de 1px en el inicio del terminal móvil */% borde-1px{ pantalla: bloque; posición: absoluta izquierda: 0; ancho: 100%; contenido: ' ';}.border-1px{ posición: relativa; %border-1px; inferior: 0; borde superior: 1px sólido #ccc; } &::antes{ @extend %border-1px; webkit-relación-min-de-píxeles-del-dispositivo: 1,5), (relación-min-de-píxeles-del-dispositivo: 1,5){ .border-1px{ &::después{ -webkit-transform: escalaY(0.7); transformación: escalaY(0.7);@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio); :2){ .border-1px{ &::después{ -webkit-transform: escalaY(0.5); transformación: escalaY(0.5); }}/*El problema de la visualización normal de 1px en el terminal móvil*/ Problema 5: js no puede analizar correctamente el valor del parámetro de la URL que contiene el signo =Descripción del problema
En el proyecto, debido a que el valor del parámetro de la solicitud de datos se obtiene de la dirección URL y el valor del parámetro contiene el signo =, el valor del parámetro no se puede analizar correctamente (ps:js usa el signo = para separar los parámetros de la URL )
Solución
Transcodifique la URL y luego decodifíquela [En este proyecto, la aplicación proporciona la dirección URL transcodificada y el front-end utiliza el complemento geturlparams para obtener el valor del parámetro de la dirección URL]
código
//Decodificar = número dom.token = decodeURI($.query.get(token)); //Plug-in //Obtener el valor sin decodificar dom.msgid = $.query.get(msgid);Pregunta 6: La escucha de eventos js nativos y el enlace de eventos jquery no son válidos en ios
Descripción del problema
Cuando se utiliza la escucha de eventos o el enlace de eventos, la activación de eventos en iOS no es válida porque el elemento principal selecciona el cuerpo o el elemento del documento.
Solución
No utilice elementos del cuerpo y del documento como elementos principales
Pregunta 7: la fecha se muestra como NaN en iosDescripción del problema
El formato de fecha de Date tiene problemas de compatibilidad en ios. La fecha en ios se mostrará como: NaN.
Solución
Solución: 2017/12/26 19:36:00 es compatible con ios, pero el formato 2017-12-26 19:36:00 no es compatible. Este último formato muestra Nan en ios (se puede mostrar normalmente en Android).
código
var time = 2017-12-26 19:36:00;time = time.replace(//-/g, /);//Convierte el '-' en el formato de hora al formato '/', compatible con iOSPregunta 8: Hay un problema con el evento de clic en iOS
Descripción del problema
Cuando el evento de clic se activa mediante un clic de iOS, se seleccionará el módulo de elemento principal de la delegación del evento [es decir: debido a la propagación del evento y el elemento principal tiene un estilo predeterminado], y habrá una capa transparente, por ejemplo
<ul> <li>Elemento de lista 1</li> <li>Elemento de lista 2</li> <li>Elemento de lista 3</li></ul>
Análisis: por ejemplo, cuando un usuario de iOS hace clic en el elemento 1 de la lista, el UL de la capa principal tendrá un estilo transparente.
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.