Código de muestra para escalar el tamaño de fuente de la aplicación web para seguir el tamaño de fuente del sistema

Recientemente trabajé en un proyecto de aplicación web, que es un desarrollo híbrido, con páginas H5 anidadas de vista web interna y nativa externa. El front-end se desarrolla utilizando vue y la adaptación se realiza mediante flexible + rem. Todo estaba bien originalmente, pero el líder dijo que algunos de los clientes eran mayores y no podían ver las fuentes con claridad, y esperaban que las fuentes web pudieran seguir los cambios de tamaño de fuente del sistema. En ese momento, realmente estaba..., pero no tuve más remedio que encontrar una manera de resolver el problema. Después de buscar en Internet, descubrí que estaba prohibido seguir los cambios de tamaño de fuente del sistema internamente. Tuve que hacerlo yo mismo.

La forma más sencilla es dejar que el sistema nativo funcione sin ningún control interno, se amplifique externamente y se adapte internamente. Sin embargo, existe un problema: la fuente del texto se puede ampliar, pero algunos cuadros de entrada y el contenido de los cuadros de entrada no se amplían, por lo que se elimina esta solución.

La vista web nativa externa permite acercar y alejar el interior sin seguir los cambios del sistema y está controlada internamente por sí misma. Después de discutir con sus colegas de Android, obtuvo los parámetros de zoom del sistema, luego pasó los parámetros a la aplicación web interna y personalizó el zoom internamente.

El código es el siguiente:

 setScaleFont(){ let fontScale=1; let scaleFontSize; let initFontSize; fontScale=parseFloat(window._nativeMe.getFontScale()); )[0]; initFontSize=this.getStyle(docHtml,'fontSize').split('px')[0]; scaleFontSize=fontScale*initFontSize;//1-1.4 escala proporcional docHtml.style.fontSize=scaleFontSize +'px'; getStyle(obj, nombre){ si(ventana.currentStyle){ retorno obj.currentStyle[nombre]; } else{ return getComputedStyle(obj, false)[nombre];

Primero obtenga la relación de escala inicial y luego reescriba el tamaño de fuente en la etiqueta html de acuerdo con la relación de escala nativa pasada por Android. Debido al uso de la adaptación rem, se adaptará de acuerdo con el tamaño del elemento raíz. Esta solución debe garantizar que la adaptación flexible se ejecute primero y luego determinar si es Android. Si es Android, ejecute el método setScaleFont para que sea efectivo. De lo contrario, el método flexible lo sobrescribirá, lo que provocará que la página sea efectiva. ampliado y luego reducido o reducido primero El fenómeno de la amplificación.

Como se muestra en la imagen de arriba, comenté este código; de lo contrario, se produciría el fenómeno de acercamiento y alejamiento mencionado anteriormente.

Este método solo es efectivo en Android. Apple no puede obtener la relación de escala de la fuente del sistema debido a problemas de permisos de seguridad, por lo que no se puede ajustar. Si alguien sabe cómo operarlo en Apple o tiene otros métodos mejores, hágamelo saber. Gracias.

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.