最近、私は外部ネイティブおよび内部 WebView ネストされた H5 ページを使用したハイブリッド開発である Web アプリ プロジェクトに取り組みました。フロントエンドはvueで開発し、適応はflexible+remで行います。当初はすべて問題ありませんでしたが、リーダーは、顧客の中には高齢でフォントがはっきりと見えない人もいると述べ、Web フォントがシステムのフォント サイズの変更に追従できることを望んでいたと述べました。その時は本当に…と思ったのですが、ネットで調べてみると、どうやらシステムのフォントサイズ変更に従うことが内部的に禁止されているようでした。自分でやらなければならなかった。
最初のオプション最も簡単な方法は、ネイティブ システムを内部で制御せずに動作させ、外部で増幅し、内部で適応させることです。ただし、テキストのフォントは拡大できますが、一部の入力ボックスと入力ボックスの内容は拡大されないという問題があるため、この解決策は削除されます。
2 番目のオプション外部のネイティブ Web ビューでは、システムの変更に追従せずに内部のズームインとズームアウトが可能であり、それ自体が内部的に制御されます。 Android の同僚と話し合った後、彼はシステムのズーム パラメータを取得し、そのパラメータを内部 Web アプリに渡し、内部でズームをカスタマイズしました。
コードは次のとおりです。
setScaleFont(){ let fontScale=1; let initFontSize; fontScale=parseFloat(window._nativeMe.getFontScale()); let docHtml=document.getElementsByTagName(html) )[0]; initFontSize=this.getStyle(docHtml,'fontSize').split('px')[0];scaleFontSize=fontScale*initFontSize;//1-1.4 比例スケーリング docHtml.style.fontSize=scaleFontSize +'px'; getStyle(obj, name){ if(window.currentStyle){ return obj.currentStyle[名前]; } else{ return getComputedStyle(obj, false)[名前];まず初期のスケーリング率を取得し、Android から渡されたネイティブ スケーリング率に従って HTML タグのフォントサイズ サイズを書き換えます。rem 適応を使用しているため、ルート要素のサイズに応じて適応されます。このソリューションでは、フレキシブル アダプテーションが最初に実行されることを確認してから、Android であるかどうかを判断する必要があります。Android の場合は、setScaleFont メソッドを実行して有効にします。そうでない場合は、フレキシブルのメソッドによって上書きされ、ページが無効になります。拡大してから縮小したり、最初に縮小したりする現象。
上の図に示すように、このコードをコメントアウトしました。そうしないと、上記のズームインとズームアウトの現象が発生します。
結論はこの方法は Android でのみ有効です。Apple はセキュリティ権限の問題によりシステム フォントの拡大縮小率を取得できないため、Apple での操作方法を知っている人、または他のより良い方法を知っている人がいたら教えてください。ありがとう。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。