Beberapa ukuran font dirender lebih besar di Safari (iPhone)

Apakah ada CSS atau alasan lain mengapa Safari / iPhone mengabaikan beberapa pengaturan ukuran font? Di situs web saya, Safari di iPhone menampilkan beberapa ukuran font: teks 13px lebih besar dari ukuran font: teks 15px. Apakah itu mungkin tidak mendukung ukuran font pada beberapa elemen?

Tanggapan Joe memiliki beberapa praktik terbaik yang baik di dalamnya, tetapi saya pikir masalah yang Anda gambarkan berpusat di sekitar fakta bahwa Safari Seluler secara otomatis menskalakan teks jika menurutnya teks akan dirender terlalu kecil. Anda bisa menyiasatinya dengan properti CSS -webkit-text-size-adjust. Berikut adalah contoh cara mengaplikasikannya ke tubuh Anda, hanya untuk iPhone:

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

Gunakan 100% alih-alih Tidak Ada.

normalize.css menyertakan ini

Selain itu, pastikan Anda menyetel setelan zoom awal ke 1 di tag meta viewport Anda:

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />

Saya tidak lagi menggunakan definisi piksel karena sangat membingungkan dan tidak persis sama di seluruh layanan visual.

Temui Unit

1. “Ems” (em): “em” adalah unit scalable yang digunakan dalam media dokumen web. Em sama dengan ukuran font saat ini, misalnya, jika ukuran font dokumen 12pt, 1em sama dengan 12pt. Ems bersifat skalabel, jadi 2em akan sama dengan 24pt, .5em sama dengan 6pt, dll. Em menjadi semakin populer di dokumen web karena skalabilitas dan sifat ramah perangkat seluler mereka.
2. Piksel (px): Piksel adalah unit berukuran tetap yang digunakan dalam media layar (yaitu untuk dibaca di layar komputer). Satu piksel sama dengan satu titik di layar komputer (divisi terkecil dari resolusi layar Anda). Banyak perancang web menggunakan unit piksel dalam dokumen web untuk menghasilkan representasi piksel sempurna dari situs mereka seperti yang ditampilkan di browser. Satu masalah dengan unit piksel adalah unit ini tidak menskala ke atas untuk pembaca dengan gangguan penglihatan atau ke bawah agar sesuai dengan perangkat seluler.
3. Poin (pt): Poin biasanya digunakan di media cetak (apa pun yang akan dicetak di atas kertas, dll.). Satu poin sama dengan 1/72 inci. Titik sangat mirip dengan piksel, karena merupakan unit berukuran tetap dan tidak dapat diskalakan ukurannya.
4. Persen (%): Satuan persen mirip dengan satuan “em”, kecuali beberapa perbedaan mendasar. Pertama dan terpenting, ukuran font saat ini sama dengan 100% (yaitu 12pt = 100%). Saat menggunakan unit persen, teks Anda tetap dapat diskalakan sepenuhnya untuk perangkat seluler dan aksesibilitas.

Saya mengalami masalah yang sama, ternyata di CSS aslinya ada baris ini:

-webkit-teks-ukuran-menyesuaikan: 120%;

Saya harus mengubahnya menjadi 100%, dan semuanya lancar. Tidak perlu mengubah semua px menjadi em atau %%.

Juga periksa apakah Anda tidak memiliki "lebar / tinggi" yang disetel ke elemen yang Anda manipulasi, Safari memberikan prioritas ukuran atas ukuran font di svg, Chrome dan FF tidak, tampaknya, setidaknya untuk saat ini.