Beberapa ukuran font dirender lebih besar di Safari (iPhone)

110

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?

css safari mobile-safari font-size Alex
sumber

Jawaban:

248

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;
  }
}
David Kaneda
sumber
2
Baru saja mengalami masalah ini. Retasan layar media kecil ini bekerja dengan sempurna. Saya akan mulai memasukkannya ke dalam file starter CSS saya.
Throttlehead
1
Wah, sakit! Membuat saya gila, saya bahkan mencoba mengubah nama kelas dan menyetel css sejajar dengan jQuery sebelum saya menemukan ini. Penyelamat!
Christoffer Bubach
1
Itu sangat membantu. Cheers :)
Dead Man
2
Pastikan untuk menggunakan kueri media. Tampaknya ini dapat membuat beberapa teks sulit untuk dibaca: Waspadalah terhadap -webkit-text-size-adjust: none
Gemmu
9
Jawaban harus diperbarui menjadi -webkit-text-size-adjust: 100%- ini menghindari pembaruan otomatis, tetapi memungkinkan pembesaran yang dimulai oleh pengguna. (sumber)
Shawn Erquhart
11

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;" />
johnpolacek
sumber
7

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.

sumber
4
Jawabannya, adalah dengan menggunakan 1 unit standar untuk teks (yaitu 12pt) dan kemudian untuk semua definisi css berikutnya menggunakan ukuran font: 90%; atau ukuran font: 110%; dll, dll. Ini lebih mudah diakses untuk semua perangkat yang Anda dukung.
1
Anda lupa yang paling penting: REM (referensi EM). Anda dapat menggunakannya di seluruh dokumen dan tetap sama (tidak berjenjang).
Andrew Swift
3
Jawaban ini tidak relevan dan tidak menjawab pertanyaan dengan cara apa pun. Pertanyaannya adalah tentang teks berukuran sama yang dirender secara berbeda, bukan tentang unit apa yang akan digunakan. Masalahnya tetap di sana unit apa pun yang digunakan.
Rauli Rajande
0

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 %%.

me1974
sumber
Desainer harus menggunakan em untuk ukuran font.
Nick Turner
2
... kecuali di css tag body di mana ukuran px adalah yang terbaik.
Matt Parkins
0

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.

marebuffi
sumber