Beispielcode zum Skalieren der Webapp-Schriftgröße, um sie an die Systemschriftgröße anzupassen

Kürzlich habe ich an einem Webapp-Projekt gearbeitet, bei dem es sich um eine Hybridentwicklung mit externen nativen und internen Webview-verschachtelten H5-Seiten handelt. Das Frontend wird mit Vue entwickelt und die Anpassung erfolgt durch flexible+rem. Ursprünglich war alles in Ordnung, aber der Leiter sagte, dass einige der Kunden alt seien und die Schriftarten nicht klar sehen könnten, und sie hofften, dass die Web-Schriftarten den Änderungen der Systemschriftgröße folgen könnten. Zu diesem Zeitpunkt war ich wirklich ..., aber ich hatte keine andere Wahl, als einen Weg zu finden, das Problem zu lösen. Nachdem ich mich im Internet umgesehen hatte, stellte ich fest, dass es verboten war, die Änderungen der Systemschriftgröße intern zu verfolgen Ich musste es selbst machen.

Der einfachste Weg besteht darin, das native System intern ohne jegliche Kontrolle arbeiten zu lassen, es extern zu verstärken und intern anzupassen. Es gibt jedoch ein Problem: Die Textschrift kann zwar vergrößert werden, einige Eingabefelder und der Inhalt der Eingabefelder werden jedoch nicht vergrößert, sodass diese Lösung entfällt.

Die externe native Webansicht ermöglicht das Vergrößern und Verkleinern im Inneren, ohne den Systemänderungen zu folgen, und wird intern selbst gesteuert. Nach Rücksprache mit seinen Android-Kollegen erhielt er die Zoomparameter des Systems, übergab die Parameter dann an die interne Webanwendung und passte den Zoom intern an.

Der Code lautet wie folgt:

 setScaleFont(){ let casteFontSize; let initFontSize(window._nativeMe.getFontScale()); let docHtml=document.getElementsByTagName( html )[0]; initFontSize=this.getStyle(docHtml,'fontSize').split('px')[0]; scaleFontSize=fontScale*initFontSize;//1-1.4 proportionale Skalierung docHtml.style.fontSize=scaleFontSize +'px'; getStyle(obj, name){ if(window.currentStyle){ return obj.currentStyle[name]; else{ return getComputedStyle(obj, false)[name];

Ermitteln Sie zunächst das anfängliche Skalierungsverhältnis und schreiben Sie dann die Schriftgröße im HTML-Tag entsprechend dem von Android übergebenen nativen Skalierungsverhältnis um. Aufgrund der Verwendung der REM-Anpassung wird sie entsprechend der Größe des Stammelements angepasst. Diese Lösung muss sicherstellen, dass die flexible Anpassung zuerst ausgeführt wird, und bestimmt dann, ob es sich um Android handelt. Führen Sie die setScaleFont-Methode aus, um sie wirksam zu machen. Andernfalls wird sie von der flexiblen Methode überschrieben, was dazu führt, dass die Seite aktiviert wird zunächst vergrößert und dann verkleinert bzw. verkleinert. Das Phänomen der Verstärkung.

Wie im Bild oben gezeigt, habe ich diesen Code auskommentiert, da sonst das oben erwähnte Vergrößern- und Verkleinern-Phänomen auftreten würde.

Diese Methode ist nur auf Android wirksam. Aufgrund von Sicherheitsberechtigungsproblemen kann Apple das Skalierungsverhältnis der Systemschrift nicht ermitteln und kann daher nicht angepasst werden. Wenn jemand weiß, wie man es auf Apple verwendet, oder andere bessere Methoden hat, lassen Sie es mich bitte wissen. Danke. Dankbarkeit.

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.