Mengapa Safari pada iPhone Kucar-kacir dengan Saiz Fon Saya?

CSS dan Safari's Font-Size Quirk

Telah diperhatikan bahawa Safari pada iPhone memaparkan percanggahan saiz fon yang tidak dijangka. Khususnya, teks dengan saiz fon yang lebih kecil (cth., 13px) kelihatan lebih besar daripada yang bersaiz lebih besar (cth., 15px). Tingkah laku yang membingungkan ini menimbulkan persoalan: adakah terdapat faktor berkaitan CSS atau faktor lain yang bertanggungjawab terhadap penggantian saiz fon Safari?

Untuk menangani misteri ini, adalah penting untuk memahami aspek penting Safari pada peranti mudah alih. Sebagai langkah mesra pengguna, Mobile Safari melaraskan penskalaan teks secara automatik apabila ia merasakan risiko pemaparan teks yang terlalu kecil. Ini adalah percubaan untuk meningkatkan kebolehbacaan, terutamanya pada skrin iPhone yang lebih kecil. Untuk mengatasi pelarasan automatik ini, sifat CSS datang untuk menyelamatkan: -webkit-text-size-adjust.

Berikut ialah contoh praktikal untuk menghapuskan kekeliruan saiz fon untuk pengguna iPhone:

@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}

Coretan CSS ini menyasarkan semua peranti mudah alih dengan lebar peranti maksimum 480px (iaitu, peranti iPhone) dan melumpuhkan penskalaan teks automatik Safari dalam unsur. Dengan menetapkan -webkit-text-size-adjust kepada 100%, anda mengarahkan Safari untuk menghormati saiz fon yang ditentukan tanpa sebarang perubahan yang tidak diingini.

Kesimpulannya, penskalaan teks automatik Mobile Safari bertujuan untuk mengoptimumkan kebolehbacaan pada skrin yang lebih kecil. Walau bagaimanapun, ini boleh membawa kepada gelagat saiz fon yang tidak dijangka. Dengan menggunakan sifat -webkit-text-size-adjust, pembangun boleh mendapatkan semula kawalan ke atas saiz fon dan memastikan paparan teks yang konsisten merentas peranti berbeza, termasuk iPhone.

Atas ialah kandungan terperinci Mengapa Safari pada iPhone Kucar-kacir dengan Saiz Fon Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!