Dificultad del proyecto: resuelva el problema del estilo y diseño de página desordenados después de activar el teclado virtual en IOS

1. Antecedentes 

Antecedentes de la demanda:

    Desarrollé un sistema de cuestionarios similar a Questionnaire Star y refactoricé el proyecto. El primer desarrollo fue para  PC . El punto más problemático no era más que la compatibilidad y adaptabilidad de los navegadores IE;

    Después de eso, el director del proyecto pidió desarrollar  simultáneamente el terminal móvil  , es decir, escribir páginas H5, que se integrarán en aplicaciones de aplicaciones, sistemas de oficina o programas pequeños. Al principio, el desarrollo  y las pruebas se llevaron a cabo en Simulador  de navegador Edge. Porque también estoy desarrollando un proyecto móvil por primera vez, por lo que no tengo experiencia (más tarde supe que debería intentar evitar el uso de posicionamiento fijo, porque IOS tendrá problemas de compatibilidad), pero no hay De esta manera, muchos lugares en el proyecto han usado fijos. Por lo tanto, después de que el proyecto se desarrolla e implementa usando Jenkins para empaquetar e implementar, se encuentra con varios problemas extraños al probarlo en el dispositivo Apple real del sistema IOS. .

---

    El primer y mayor problema es:

        1. Cuando el cuadro de entrada se enfoca y llama  al teclado en pantalla  para ingresar el contenido, es decir, después de guardar el teclado en pantalla, el diseño y la composición tipográfica de toda la página están desordenados, y cuando desea seleccionar el cuadro de entrada nuevamente , descubre que no se puede seleccionar, de hecho, toda la página se ha caído en este momento, y si desea seleccionar el foco nuevamente, debe hacer clic en él. .

---

2. El proceso de solución

De todos modos, es todo tipo de Baidu, todo tipo de consejos de los grandes:

JSBridge :  documento abierto Alipay H5

---

La solución de Baidu:

Resuelva el error que cuando la entrada H5 IOS está enfocada, toda la página se empuja hacia arriba, pero la página no se mueve hacia abajo cuando el teclado está cerrado

Cuando se cierra el teclado virtual en IOS, la página se empuja hacia arriba, la solución definitiva que no se puede restaurar

proyecto de desarrollo uniapp :

Recuerde una vez que la página h5 de ios evoca el teclado virtual para pisar los pit-Nuggets

La solución al problema de subir la página cuando el componente de entrada en UniApp muestra el teclado en pantalla en el dispositivo IOS, y el teclado en pantalla emergente se fija en la parte superior del teclado en pantalla después de que el componente de entrada está enfocado y regresa a la posición original después de perder el foco. _ios interfaz de teclado emergente subir

---

He probado todas las formas extrañas anteriores, pero al final sigue siendo inútil:

3. Soluciones

Finalmente, después de consultar con los jefes de la empresa, básicamente está bien ~

-webkit-backface-visibility_Notebooks_Academia de Diseño

Combinar ➕: -webkit-transform: traducir3d(0,0,0)  

¡Configúralo globalmente en App.vue y listo!

(Por supuesto, es mejor juzgar si agregar atributos para el sistema IOS, porque puede afectar el sistema Android ~)

---

4. Código final

<script>
export default {
	mounted() {
		// 判断是否为IOS系统以添加CSS属性
		let u = navigator.userAgent;
		let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
		if (isIOS) {
			let iosApp = document.getElementById('app');
			iosApp.style.backfaceVisibility = 'hidden';
			iosApp.style.transform = 'translate3d(0,0,0)';
		}
	},
};
</script>

---

¡Perfecto! ! Después de clase ~