Contoh kode untuk menskalakan ukuran font aplikasi web agar mengikuti ukuran font sistem

Baru-baru ini saya mengerjakan proyek aplikasi web, yang merupakan pengembangan hibrid, dengan halaman H5 bersarang asli eksternal dan tampilan web internal. Front-end dikembangkan menggunakan vue, dan adaptasi dibuat dengan fleksibel+rem. Awalnya semuanya baik-baik saja, tetapi pemimpinnya mengatakan bahwa beberapa pelanggan sudah tua dan tidak dapat melihat font dengan jelas, dan mereka berharap font web dapat mengikuti perubahan ukuran font sistem. Saat itu, saya benar-benar..., tetapi saya tidak punya pilihan selain mencari cara untuk menyelesaikan masalah tersebut.Setelah mencari di Internet, saya menemukan bahwa dilarang mengikuti perubahan ukuran font sistem secara internal Saya harus melakukannya sendiri.

Cara paling sederhana adalah membiarkan sistem asli beroperasi tanpa kendali apa pun secara internal, memperkuat secara eksternal, dan beradaptasi secara internal. Namun terdapat masalah. Font teks dapat diperbesar, tetapi beberapa kotak masukan dan isi kotak masukan tidak diperbesar, sehingga solusi ini dihilangkan.

Tampilan web asli eksternal memungkinkan pembesaran dan pengecilan bagian dalam tidak mengikuti perubahan sistem, dan dikontrol secara internal dengan sendirinya. Setelah berdiskusi dengan rekan-rekan Androidnya, dia memperoleh parameter zoom sistem, lalu meneruskan parameter tersebut ke aplikasi web internal, dan menyesuaikan zoom secara internal.

Kodenya adalah sebagai berikut:

 setScaleFont(){ biarkan fontScale=1; biarkan scaleFontSize; biarkan initFontSize; fontScale=parseFloat(window._nativeMe.getFontScale()); )[0]; initFontSize=this.getStyle(docHtml,'fontSize').split('px')[0]; scaleFontSize=fontScale*initFontSize;//1-1.4 penskalaan proporsional docHtml.style.fontSize=scaleFontSize +'px' } , getStyle(obj, nama){ if(window.currentStyle){ kembali obj.currentStyle[nama]; } else{ kembalikan getComputedStyle(obj, false)[nama];

Pertama-tama dapatkan rasio penskalaan awal, lalu tulis ulang ukuran font pada tag html sesuai dengan rasio penskalaan asli yang diteruskan oleh Android. Karena penggunaan adaptasi rem, maka akan disesuaikan dengan ukuran elemen root. Solusi ini harus memastikan bahwa adaptasi fleksibel dijalankan terlebih dahulu, dan kemudian menentukan apakah itu Android. Jika itu Android, jalankan metode setScaleFont agar efektif dan kemudian direduksi atau direduksi terlebih dahulu. Fenomena amplifikasi.

Seperti yang ditunjukkan pada gambar di atas, saya mengomentari kode ini, jika tidak, fenomena zoom-in dan zoom-out yang disebutkan di atas akan terjadi.

Metode ini hanya efektif di Android. Apple tidak dapat memperoleh rasio skala font sistem karena masalah izin keamanan, sehingga tidak dapat disesuaikan. Jika ada yang tahu cara mengoperasikannya di Apple atau memiliki metode lain yang lebih baik, beri tahu saya. Terima kasih banyak.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.