Encontré un problema extraño en el trabajo. Después de luchar durante mucho tiempo, finalmente lo resolví. Aquí registro las ideas de análisis y las soluciones.
El proyecto consiste en crear un sitio web oficial de la empresa responsivo. Después de cortar la página de imagen estática en la etapa inicial, se envió al backend para usarla como plantilla y básicamente abandoné el proyecto.
Cuando se implementó el backend, descubrí que la visualización de la página en el terminal móvil no era del todo correcta y se veía muy borrosa. Lo primero que pensé fue que el jefe del meta estaba cubierto. Después de verificar el código fuente, descubrí que estaba cubierto.
Este es el metaencabezado que estoy acostumbrado a usar para hacer que el ancho de la página cambie de forma adaptativa según el ancho del dispositivo.
<meta nombre=contenido de ventana gráfica=ancho=ancho del dispositivo, escala-inicial=1, escala-mínima=1,0, escala-máxima=1,0, escalable por el usuario=no />
Sin embargo, el marco de implementación de back-end se introduce directamente de acuerdo con la plantilla, y algunos recursos públicos incluso incluyen el meta para configurar la ventana gráfica. El backend se presenta así:
<meta nombre=id de ventana gráfica=contenido de ventana gráfica=ancho=640px, escalable por el usuario=no>
A este encabezado se le adjunta un archivo js que debe agregarse, ¡y se informa claramente que el archivo js no se puede modificar! ¡Entonces esta configuración de un ancho fijo de 640px sobrescribe mi metaconfiguración original que cambia con el ancho del dispositivo!
El problema surge, la página estática se completó y, debido a factores históricos del código, una parte considerable del código no usaba unidades rem al principio y ya no es posible modificar el efecto CSS a gran escala. Solo restableciendo el ancho de la ventana gráfica a través de js se puede anular nuevamente... Esto es bastante simple, pero el código es bastante feo.
Pero surge otro problema. Esta página del sitio web oficial también introduce dinámicamente páginas iframe. Estas páginas iframe tienen un ancho fijo de 640 px. ¡Esto es tan devastador! Si agrego meta que cambia con el ancho del dispositivo, entonces estos iframes no se pueden ver; si no agrego meta nuevamente, ¡entonces el sitio web oficial no se puede ver!
Afortunadamente, estos iframes se introducen mediante un método unificado. Aunque el archivo js del método de introducción no se puede cambiar, aún es posible monitorearlo nuevamente en el código comercial. Entonces, después de vincular nuevamente el evento de clic y determinar si se ha introducido el iframe, ¡es hora de usar algunos métodos especiales!
CSS3 tiene un método transform: scale() que puede escalar elementos. Aunque el ancho y alto reales del espacio ocupado no han cambiado, el efecto de visualización sigue siendo bueno.
La relación de escala correspondiente se puede obtener calculando 缩放比例= 设备宽度/ 640 y luego configurando transform: scale(缩放比例) en el iframe introducido para lograr una hermosa escala.
¿Será este el fin del asunto? ¡No! ¡aún no! El iframe se escala, pero la altura también se escala y el contenido se muestra de forma incompleta. Establecer height: 设备高度/ 缩放比例puede restaurar la altura original del iframe.
¿Pensaste que se había acabado? ¡No precisamente! ¡Todavía hay problemas! Después de escalar la capa iframe mediante scale() , también se mueve una cierta distancia hacia abajo y hacia la derecha de forma predeterminada. ¡Esto se debe a que scale() escala según el centro de forma predeterminada! Se dedicó mucho tiempo aquí para encontrar soluciones adecuadas, como margen negativo, traducir (), etc. Sin embargo, debido a la dificultad para calcular el coeficiente de proporción móvil apropiado, lamento mi pobre algoritmo. Probé este método. mucho tiempo y finalmente decidi rendirme.... ..
Al revisar el manual de CSS, encontré un atributo familiar pero desconocido.
Establezca la posición del punto base del elemento rotado:
origen-transformación: eje x eje y eje z;
Tiene tres valores de atributos, que representan respectivamente dónde se coloca la vista definida en los ejes X, Y y Z.
¡Encontrarse con un viejo amigo en una tierra extranjera, encontrarse con un viejo amigo después de una larga sequía! ¡Lo que quiero eres tú! Establecer transform-origin: 0 top 0 ~
En realidad, este atributo se ha usado hace mucho tiempo, pero lo que escribí por primera vez fue la abreviatura transform-origin: 0 , y después de ser analizado por el navegador, fue transform-origin: 0 center 0 ... Cómo me sentí en Ese es el momento. He estado pensando en mover el iframe hacia arriba, pero no sabía que otras personas tenían esa función, pero lo ignoré. Todavía no puedo estudiar con prisa. Puedo perder medio día en un atributo. Probablemente no soy un front-end calificado... (escapar).
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.