Sample code for scaling webapp font size to follow system font size

Recently I worked on a webapp project, which is a hybrid development, with external native and internal webview nested H5 pages. The front-end is developed using vue, and the adaptation is made by flexible+rem. Everything was fine originally, but the leader said that some of the customers were old and could not see the fonts clearly, and they hoped that the web fonts could follow the system font size changes. At that time, I was really..., but I had no choice but to find a way to solve the problem. After searching around the Internet, I found that it was prohibited to follow the system font size changes internally. It seemed that I had to do it myself.

The simplest way is to let the native system operate without any control internally, amplify externally, and adapt internally. However, there is a problem. The text font can be enlarged, but some input boxes and the contents of the input boxes are not enlarged, so this solution is eliminated.

The external native webview allows the zooming in and out inside not to follow the system changes, and is controlled internally by itself. After discussing with his Android colleagues, he obtained the system zoom parameters, then passed the parameters to the internal webapp, and customized the zoom internally.

The code is as follows:

 setScaleFont(){ let fontScale=1; let scaleFontSize; let initFontSize; fontScale=parseFloat(window._nativeMe.getFontScale()); console.log(`Scale: ${fontScale}`); let docHtml=document.getElementsByTagName( html)[0]; initFontSize=this.getStyle(docHtml,'fontSize').split('px')[0]; scaleFontSize=fontScale*initFontSize;//1-1.4 proportional scaling docHtml.style.fontSize=scaleFontSize +'px'; } , getStyle(obj, name){ if(window.currentStyle){ return obj.currentStyle[name]; } else{ return getComputedStyle(obj, false)[name]; } }

First obtain the initial scaling ratio, and then rewrite the fontsize size on the html tag according to the native scaling ratio passed in by Android. Due to the use of rem adaptation, it will be adapted according to the size of the root element. This solution must ensure that the flexible adaptation is executed first, and then determines whether it is Android. If it is Android, execute the setScaleFont method to be effective. Otherwise, it will be overwritten by the method in flexible, causing the page to be enlarged and then reduced or reduced first. The phenomenon of amplification.

As shown in the picture above, I commented out this code, otherwise the above-mentioned zoom-in and zoom-out phenomenon would occur.

This method is only effective on Android. Apple cannot obtain the scaling ratio of the system font due to security permission issues, so it cannot be adjusted. If anyone knows how to operate it on Apple or has other better methods, please let me know. Thank you. gratitude.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.