Código de exemplo para dimensionar o tamanho da fonte do webapp para seguir o tamanho da fonte do sistema

Recentemente trabalhei em um projeto de webapp, que é um desenvolvimento híbrido, com páginas H5 aninhadas de webview interno e nativo externo. O front-end é desenvolvido em vue, e a adaptação é feita emflexível+rem. Originalmente tudo estava bem, mas o líder disse que alguns dos clientes eram antigos e não conseguiam ver as fontes claramente, e esperavam que as fontes da web pudessem seguir as mudanças no tamanho da fonte do sistema. Naquela época eu estava realmente..., mas não tive escolha a não ser encontrar uma maneira de resolver o problema. Depois de pesquisar na Internet, descobri que era proibido acompanhar internamente as alterações de tamanho da fonte do sistema. Eu tive que fazer isso sozinho.

A maneira mais simples é deixar o sistema nativo operar sem nenhum controle interno, amplificar externamente e adaptar-se internamente. No entanto, há um problema. A fonte do texto pode ser ampliada, mas algumas caixas de entrada e o conteúdo das caixas de entrada não são ampliados, portanto esta solução é eliminada.

O webview nativo externo permite que o zoom in e out não acompanhe as alterações do sistema, sendo controlado internamente por si mesmo. Depois de discutir com seus colegas Android, ele obteve os parâmetros de zoom do sistema, depois passou os parâmetros para o webapp interno e personalizou o zoom internamente.

O código é o seguinte:

 setScaleFont(){ let fontScale=1; let scaleFontSize; let initFontSize=parseFloat(window._nativeMe.getFontScale()); )[0]; initFontSize=this.getStyle(docHtml,'fontSize').split('px')[0]; getStyle(obj, nome){ if(window.currentStyle){ retornar obj.currentStyle[nome]; else{ return getComputedStyle(obj, false)[nome];

Primeiro obtenha a proporção de escala inicial e, em seguida, reescreva o tamanho da fonte na tag html de acordo com a proporção de escala nativa transmitida pelo Android. Devido ao uso da adaptação rem, ela será adaptada de acordo com o tamanho do elemento raiz. Esta solução deve garantir que a adaptação flexível seja executada primeiro e, em seguida, determine se é Android. Se for Android, execute o método setScaleFont para ser eficaz, caso contrário, será substituído pelo método flexível, fazendo com que a página seja. ampliado e depois reduzido ou reduzido primeiro.

Conforme mostrado na imagem acima, comentei este código, caso contrário ocorreria o fenômeno de aumento e redução de zoom mencionado acima.

Este método só é eficaz no Android. A Apple não consegue obter a proporção de escala da fonte do sistema devido a problemas de permissão de segurança, por isso não pode ser ajustado. Se alguém souber como operá-lo na Apple ou tiver outros métodos melhores, por favor me avise. Obrigado.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.