Adakah anda menggunakan pelarasan saiz teks dalam gaya global anda?

Baru-baru ini, saya terjumpa isu CSS yang membingungkan yang ditunjukkan hanya pada peranti mudah alih sebenar, terutamanya iOS Safari. Fon tertentu kelihatan besar tidak seimbang, mengganggu integriti reka letak. Cuba untuk membetulkannya dengan menggunakan saiz fon yang berbeza dalam alat dev, malah menggunakan !important tidak memberi kesan. Anda boleh lihat di bawah paparan skrin yang diingini dan skrin yang akhirnya saya lihat.

Memahami apa yang sedang berlaku

Setelah menyiasat, saya mendapati kadangkala penyemak imbas mudah alih melaraskan saiz fon secara dinamik untuk meningkatkan kebolehbacaan pengguna. Gelagat pemaparan penyemak imbas mudah alih berbeza daripada pelayar desktop. Tidak seperti penyemak imbas desktop, yang biasanya memaparkan halaman pada lebar skrin peranti, penyemak imbas mudah alih sering menggunakan port pandangan yang lebih luas, biasanya ditetapkan pada 980px sebagai lalai, untuk menampung tapak web yang tidak dioptimumkan untuk skrin yang lebih kecil. Ini pasti akan membawa kepada tatal mendatar. Untuk mengatasi masalah ini, peraturan di bawah biasanya digunakan dalam HTML untuk memastikan skala port pandangan sesuai dengan saiz peranti dengan tepat.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Walau bagaimanapun, semasa mengecilkan saiz untuk memuatkan skrin mudah alih, sesetengah penyemak imbas mungkin menjadikan teks terlalu kecil, mendorong penggunaan algoritma inflasi teks untuk membesarkannya untuk kebolehbacaan yang lebih baik. Algoritma ini kadangkala membawa kepada pembesaran fon yang tidak dijangka, terutamanya ketara apabila elemen yang merentangi lebar penuh skrin mengalami pembesaran saiz teks tanpa mengubah reka letak. Untuk menangani tingkah laku ini dan mengekalkan saiz teks yang konsisten merentas peranti, kami boleh menggunakan sifat pelarasan saiz teks CSS.

Pelarasan saiz teks memberi kuasa kepada pengarang web untuk melumpuhkan atau melaraskan gelagat inflasi teks automatik ini, terutamanya penting untuk tapak web yang direka bentuk dengan mengingati skrin kecil (yang saya percaya kebanyakan tapak web baharu). Harta ini mengawal algoritma inflasi teks yang digunakan pada beberapa telefon pintar dan tablet. Pelayar lain akan mengabaikannya. Pelarasan saiz lalai mempengaruhi kawalan teks dan borang, sama ada kawalan borang tersebut mengandungi teks (cth., input teks, pilih) atau tidak (cth., butang radio, kotak pilihan).

Ia mempunyai 3 nilai yang mungkin:

• auto: Nilai ini mengarahkan pemapar untuk menggunakan pelarasan saiz lalai apabila memaparkan teks pada peranti kecil.
• tiada: Perender diarahkan untuk tidak melakukan sebarang pelarasan saiz untuk teks yang dipaparkan pada peranti kecil.
• peratusan[0,∞]: Perender tidak boleh melakukan pelarasan saiz tetapi sebaliknya nilai pengiraan saiz fon mesti didarab dengan peratusan ini. Menggunakan 100% adalah bersamaan dengan tidak menggunakan apa-apa.

Pendekatan saya untuk membetulkan perkara ini

Saya membetulkan masalah inflasi teks dengan menambahkan sifat ini pada badan sebagai sebahagian daripada gaya css global kami (boleh ditambahkan pada html juga). Saya syorkan anda menambahkan peraturan ini pada fail css global/set semula/normalize anda:

body {
    // prevent font-size inflation on small devices
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

Untuk safari iOS sahaja -webkit-text-size-adjust berfungsi tetapi saya menyertakan vendor lain dan harta bukan vendor untuk menambah sokongan untuk penyemak imbas lain. Adalah sangat penting untuk menambah harta bukan vendor pada mulanya. Jika ditambahkan pada penghujungnya, dalam Safari iOS ia akan mengatasi -webkit satu dan kerana ia tidak disokong ia tidak akan digunakan, jadi perkara akan berfungsi sebagai lalai.

Beberapa pertimbangan lain yang perlu diingat:

• Sifat percubaan: Adalah penting untuk berhati-hati apabila melaksanakan sifat pelarasan saiz teks dalam persekitaran pengeluaran, kerana ia kekal sebagai ciri percubaan. Sokongan dan pelaksanaan penyemak imbas mungkin mengalami perubahan dari semasa ke semasa.
• Takrifan "peranti kecil": Masih terdapat kekaburan yang menyelubungi takrifan apa yang membentuk "peranti kecil".
• Sesetengah orang mengadu bahawa menggunakan tiada akan menghalang zum pada telefon bimbit, tetapi itu tidak berlaku semasa saya menguji, tiada dan 100% berfungsi sama seperti penjelasan mdn.

Bagaimana orang lain menggunakannya

Beberapa pustaka tetapan semula/normalisasi CSS yang popular menggabungkan beberapa variasi pelarasan saiz teks.

• normalize.css
• Tetapan semula CSS baharu
• sanitasi.css.

Terima kasih kerana membaca!? Berikut ialah sumber tambahan jika anda rasa ingin membaca lebih lanjut tentang perkara ini.

• drafts.csswg.org

• rujukan web

• developer.apple.com.

Atas ialah kandungan terperinci Adakah anda menggunakan pelarasan saiz teks dalam gaya global anda?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!