fon dan ikon uniapp tidak mendatar

Apabila membangunkan aplikasi Uniapp baru-baru ini, saya menghadapi masalah pelik, iaitu, fon dan ikon tidak dipaparkan secara mendatar pada sesetengah peranti. Masalah ini sangat mengganggu saya kerana ia kelihatan normal pada peranti saya tetapi mempunyai masalah pada peranti lain. Selepas beberapa hari penyelidikan dan penyahpepijatan, akhirnya saya menemui punca dan penyelesaiannya.

Penerangan Masalah

Pertama, mari kita lihat prestasi masalah ini. Pada peranti pembangunan saya, seperti yang ditunjukkan dalam gambar di bawah, fon dan ikon dipaparkan secara normal tanpa sebarang masalah.

Walau bagaimanapun, apabila saya memasang apl itu pada peranti Android lain, sesuatu telah berlaku. Seperti yang ditunjukkan dalam gambar di bawah, anda boleh melihat bahawa fon mahupun ikon tidak mendatar Bahagian bawah fon dicondongkan ke kiri dan bahagian bawah ikon dicondongkan ke kanan.

Kemunculan masalah ini telah menjejaskan estetika keseluruhan aplikasi, dan juga akan menyebabkan masalah besar untuk sesetengah reka bentuk UI yang memerlukan reka letak yang baik.

Analisis Masalah

Seterusnya, mari analisa punca masalah ini. Selepas penyahpepijatan dan penyelidikan saya, saya mendapati bahawa masalah ini disebabkan terutamanya oleh resolusi dan ketumpatan piksel peranti.

Pada peranti saya sendiri, resolusinya ialah 1080x1920 dan ketumpatan piksel ialah 440dpi. Pada peranti ujian lain, resolusi dan ketumpatan piksel akan berbeza-beza. Oleh kerana fon dan ikon dipaparkan berdasarkan piksel, saiz fon dan saiz ikon yang sama akan muncul dalam saiz yang berbeza pada peranti dengan resolusi dan ketumpatan piksel yang berbeza. Selain itu, titik utama fon dan ikon yang berbeza juga akan menyebabkan penyelewengan dalam penjajaran bawahnya.

Penyelesaian

Seterusnya, mari kita bincangkan cara menyelesaikan masalah ini. Selepas penyelidikan dan penerokaan saya, saya merumuskan idea penyelesaian berikut.

1. Gunakan ikon vektor

Ikon vektor ialah ikon berdasarkan huraian digital grafik ia berbeza daripada ikon peta bit dan boleh digunakan pada sebarang resolusi dan Mengekalkan kejelasan dan konsistensi pada ketumpatan piksel. Menggunakan ikon vektor mengelakkan masalah dengan saiz ikon dan sisihan kedudukan yang disebabkan oleh resolusi dan ketumpatan piksel yang berbeza.

Penggunaan ikon vektor dalam Uniapp memerlukan penggunaan perpustakaan pihak ketiga (seperti fontawesome, ionicon, dll. Dengan memperkenalkan fail ikon dalam pustaka, ikon yang sepadan boleh dipaparkan pada halaman). menggunakan nama kelas mereka yang sepadan. Untuk penggunaan khusus, sila rujuk dokumentasi perpustakaan pihak ketiga yang berkaitan.

2. Gunakan susun atur fleksibel

Susun atur fleksibel ialah kaedah reka letak baharu dalam CSS3, yang membolehkan label dalam bekas melaraskan saiz, jarak dan kedudukan secara fleksibel, menyelesaikan masalah yang disebabkan oleh resolusi dan Masalah tetapan taip disebabkan oleh ketumpatan piksel yang berbeza. Uniapp juga menyokong penggunaan reka letak fleksibel Anda boleh menetapkan mod susun atur bekas induk kepada lentur, dan saiz dan kedudukan label anak boleh dicapai dengan menetapkan sifat fleksibelnya.

3. Gunakan unit piksel

Dalam Uniapp, unit lalai label ialah rpx (piksel responsif), iaitu unit yang menyesuaikan mengikut ketumpatan piksel peranti, tetapi dalam beberapa kes Seterusnya, menggunakan unit piksel (px) akan menjadi lebih tepat dan boleh dipercayai. Oleh kerana unit piksel tidak dipengaruhi oleh ketumpatan piksel peranti, anda boleh mengelakkan masalah tipografi pada peranti dengan resolusi dan ketumpatan piksel yang berbeza.

Kesimpulan

Di atas adalah analisis dan penyelesaian saya kepada masalah fon dan ikon tidak rata dalam aplikasi Uniapp. Selepas beberapa hari saya berusaha, akhirnya saya menemui cara untuk menyelesaikan masalah ini dan berjaya menerapkannya pada apl saya Kini apl saya boleh memaparkan tipografi yang cantik pada pelbagai peranti. Saya harap artikel ini dapat membantu pembangun lain yang menghadapi masalah yang sama.

Atas ialah kandungan terperinci fon dan ikon uniapp tidak mendatar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!