Ich bin bei der Arbeit auf ein seltsames Problem gestoßen und habe es endlich gelöst. Hier trage ich die Analyseideen und -lösungen auf.
Das Projekt besteht darin, eine reaktionsfähige offizielle Website des Unternehmens zu erstellen. Nachdem die statische Bildseite in der Anfangsphase ausgeschnitten wurde, wurde sie zur Verwendung als Vorlage an das Backend übermittelt, und ich habe das Projekt im Grunde genommen beendet.
Bei der Implementierung des Backends stellte ich fest, dass die Seitendarstellung auf dem mobilen Endgerät nicht ganz stimmte und sehr unscharf aussah. Der erste Gedanke war, dass der Kopf des Metas abgedeckt war. Nachdem ich den Quellcode überprüft hatte, stellte ich fest, dass er abgedeckt war.
Dies ist der Meta-Header, den ich normalerweise verwende, um die Seitenbreite adaptiv an die Gerätebreite anzupassen.
<meta name=viewport content=width=device-width, initial-scale=1, Minimum-scale=1.0, Maximum-scale=1.0, user-scalable=no />
Das Back-End-Implementierungsframework wird jedoch direkt gemäß der Vorlage eingeführt, und einige öffentliche Ressourcen enthalten sogar das Meta zum Festlegen des Ansichtsfensters. Das Backend wird wie folgt eingeführt:
<meta name=viewport id=viewport content=width=640px, user-scalable=no>
An diesen Header wird eine js-Datei angehängt, die hinzugefügt werden muss, und es wird deutlich darauf hingewiesen, dass die js-Datei nicht geändert werden kann! Diese Einstellung einer festen Breite von 640 Pixel überschreibt also meine ursprüngliche Meta-Einstellung, die sich mit der Gerätebreite ändert!
Das Problem tritt auf, die statische Seite wurde fertiggestellt und aufgrund historischer Codefaktoren verwendete ein erheblicher Teil des Codes zu Beginn keine REM-Einheiten, und es ist nicht mehr möglich, den CSS-Effekt in großem Umfang zu ändern. Nur durch Zurücksetzen der Ansichtsfensterbreite über js kann sie wieder überschrieben werden ... Das ist ganz einfach, aber der Code ist ziemlich hässlich.
Es entsteht jedoch ein weiteres Problem. Diese offizielle Website führt auch dynamisch Iframe-Seiten ein. Das ist so verheerend! Wenn ich Metadaten hinzufüge, die sich mit der Gerätebreite ändern, können diese Iframes nicht angezeigt werden. Wenn ich keine Metadaten erneut hinzufüge, kann die offizielle Website selbst nicht angezeigt werden!
Glücklicherweise werden diese Iframes über eine einheitliche Methode eingeführt. Obwohl die js-Datei der Einführungsmethode nicht geändert werden kann, ist eine erneute Überwachung im Geschäftscode möglich. Nachdem Sie das Click-Ereignis erneut gebunden und festgestellt haben, ob der Iframe eingeführt wurde, ist es an der Zeit, einige spezielle Methoden zu verwenden!
CSS3 verfügt über eine transform: scale() Methode, mit der Elemente skaliert werden können. Obwohl sich die tatsächliche Breite und Höhe des belegten Raums nicht geändert hat, ist der Anzeigeeffekt immer noch gut.
Das entsprechende Skalierungsverhältnis kann durch Berechnen 缩放比例= 设备宽度/ 640 und anschließendes Festlegen von transform: scale(缩放比例) auf dem eingeführten Iframe ermittelt werden, um eine schöne Skalierung zu erzielen!
Ist die Sache damit erledigt? NEIN! Noch nicht! Der Iframe ist skaliert, aber auch die Höhe ist skaliert und der Inhalt wird unvollständig angezeigt. Durch Einstellen height: 设备高度/ 缩放比例kann die ursprüngliche Iframe-Höhe wiederherstellen.
Dachten Sie, es wäre vorbei? Nicht wirklich! Es gibt immer noch Probleme! Nachdem die Iframe-Ebene durch scale() skaliert wurde, bewegt sie sich standardmäßig auch um eine bestimmte Strecke nach unten und nach rechts. Dies liegt daran, dass scale() standardmäßig entsprechend der Mitte skaliert! Hier wurde viel Zeit aufgewendet, um geeignete Lösungen zu finden, wie zum Beispiel negative Marge, Translate() usw. Aufgrund der Schwierigkeit, den entsprechenden Bewegungsproportionalkoeffizienten zu berechnen, bedauere ich jedoch meinen schlechten Algorithmus, für den ich diese Methode ausprobiert habe eine lange Zeit und schließlich beschlossen, aufzugeben.... ..
Als ich das CSS-Handbuch durchgesehen habe, habe ich ein bekanntes, aber unbekanntes Attribut gefunden.
Legen Sie die Basispunktposition des gedrehten Elements fest:
Transformationsursprung: x-Achse, y-Achse, z-Achse;
Es verfügt über drei Attributwerte, die jeweils darstellen, wo die definierte Ansicht auf der X-, Y- und Z-Achse platziert wird.
Treffen mit einem alten Freund in einem fremden Land, Treffen mit einem alten Freund nach einer langen Dürre! Was ich will, bist du! Setze transform-origin: 0 top 0 Lösung~
Eigentlich wurde dieses Attribut schon vor langer Zeit verwendet, aber was ich zuerst geschrieben habe, war die Abkürzung transform-origin: 0 , und nachdem es vom Browser analysiert wurde, lautete es transform-origin: 0 center 0 ... Wie ich mich dabei fühlte Das war's. Ich habe darüber nachgedacht, den Iframe nach oben zu verschieben, aber ich wusste nicht, dass andere Leute eine solche Funktion haben, aber ich habe sie ignoriert. Ich kann immer noch nicht in Eile lernen. Ich kann einen halben Tag mit einem Attribut verschwenden. Ich bin wahrscheinlich kein qualifizierter Frontend
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.