Exemple de code pour mettre à l'échelle la taille de la police de l'application Web afin de suivre la taille de la police du système

Récemment, j'ai travaillé sur un projet d'application Web, qui est un développement hybride, avec des pages H5 imbriquées externes natives et internes. Le front-end est développé en utilisant vue, et l'adaptation est réalisée par flexible+rem. Tout allait bien à l'origine, mais le dirigeant a déclaré que certains clients étaient âgés et ne pouvaient pas voir clairement les polices, et ils espéraient que les polices Web pourraient suivre les changements de taille de police du système. A cette époque, j'étais vraiment..., mais je n'avais d'autre choix que de trouver un moyen de résoudre le problème. Après avoir cherché sur Internet, j'ai découvert qu'il était interdit de suivre les changements de taille de police du système en interne. J'ai dû le faire moi-même.

Le moyen le plus simple est de laisser le système natif fonctionner sans aucun contrôle en interne, s’amplifier en externe et s’adapter en interne. Cependant, il existe un problème. La police du texte peut être agrandie, mais certaines zones de saisie et le contenu des zones de saisie ne sont pas agrandis, cette solution est donc éliminée.

La vue Web native externe permet de zoomer et dézoomer à l'intérieur pour ne pas suivre les modifications du système et est contrôlée en interne par elle-même. Après avoir discuté avec ses collègues Android, il a obtenu les paramètres de zoom du système, puis a transmis les paramètres à la webapp interne et a personnalisé le zoom en interne.

Le code est le suivant :

 setScaleFont(){ let fontScale=1; let scaleFontSize; let initFontSize; fontScale=parseFloat(window._nativeMe.getFontScale()); console.log(`Scale: ${fontScale}`); )(0]; initFontSize=this.getStyle(docHtml,'fontSize').split('px')[0]; scaleFontSize=fontScale*initFontSize;//1-1.4 mise à l'échelle proportionnelle docHtml.style.fontSize=scaleFontSize +'px' } , getStyle(obj, nom){ if(window.currentStyle){ return obj.currentStyle[nom]; } else{ return getComputedStyle(obj, false)[nom] } }

Obtenez d'abord le rapport de mise à l'échelle initial, puis réécrivez la taille de la police sur la balise html en fonction du rapport de mise à l'échelle natif transmis par Android. En raison de l'utilisation de l'adaptation rem, elle sera adaptée en fonction de la taille de l'élément racine. Cette solution doit garantir que l'adaptation flexible est exécutée en premier, puis déterminer s'il s'agit d'Android. S'il s'agit d'Android, exécutez la méthode setScaleFont pour qu'elle soit efficace. Sinon, elle sera écrasée par la méthode en flexible, ce qui entraînera la page. agrandi puis réduit ou réduit d'abord. Le phénomène d'amplification.

Comme le montre l'image ci-dessus, j'ai commenté ce code, sinon le phénomène de zoom avant et arrière mentionné ci-dessus se produirait.

Cette méthode n'est efficace que sur Android. Apple ne peut pas obtenir le taux de mise à l'échelle de la police système en raison de problèmes d'autorisation de sécurité. Si quelqu'un sait comment l'utiliser sur Apple ou dispose d'autres méthodes plus efficaces, veuillez me le faire savoir. Merci.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.