Bazı yazı tipi boyutları Safari'de (iPhone) daha büyük görüntülendi

Safari / iPhone'un bazı yazı tipi boyutu ayarlarını görmezden gelmesinin CSS veya başka nedenleri var mı? Benim özel web sitemde iPhone'daki Safari, yazı tipi boyutu: 13 piksel büyüklüğünde yazı tipi boyutu: 15 piksellik metin oluşturuyor. Bazı öğelerde yazı tipi boyutunu desteklemiyor olabilir mi?

Joe'nun cevabında bazı iyi uygulamalar var, ancak açıkladığınız sorunun, Mobile Safari'nin metnin çok küçük olacağını düşünmesi durumunda metni otomatik olarak ölçeklendirmesi gerçeğine odaklandığını düşünüyorum. Bunu CSS özelliği ile aşabilirsiniz -webkit-text-size-adjust. İşte sadece iPhone için bunu vücudunuza nasıl uygulayacağınıza dair bir örnek:

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

Yok yerine% 100 kullanın.

normalize.css bunu içerir

Ayrıca, görüntü alanı meta etiketinizde ilk yakınlaştırma ayarını 1 olarak ayarladığınızdan emin olun:

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

Artık piksel tanımlarını gerçekten kafa karıştırıcı olduklarından ve görsel hizmetlerde tamamen aynı olmadığından kullanmıyorum.

Birimlerle Tanışın

1. "Ems" (em): "Em", web belge ortamında kullanılan ölçeklenebilir bir birimdir. Bir em, mevcut yazı tipi boyutuna eşittir, örneğin, belgenin yazı tipi boyutu 12pt ise, 1em 12pt'a eşittir. Ems doğası gereği ölçeklenebilir, bu nedenle 2em 24pt, .5em 6pt, vb. Ems, ölçeklenebilirlik ve mobil cihaz dostu yapıları nedeniyle web belgelerinde giderek daha popüler hale geliyor.
2. Piksel (px): Pikseller, ekran ortamında kullanılan (yani bilgisayar ekranında okunacak) sabit boyutlu birimlerdir. Bir piksel, bilgisayar ekranındaki bir noktaya eşittir (ekranınızın çözünürlüğünün en küçük bölümü). Birçok web tasarımcısı, sitelerinin tarayıcıda işlenirken mükemmel pikselli bir temsilini oluşturmak için web belgelerinde piksel birimleri kullanır. Piksel birimiyle ilgili bir sorun, görme engelli okuyucular için yukarı doğru veya mobil cihazlara uyacak şekilde aşağı doğru ölçeklenmemesidir.
3. Noktalar (pt): Noktalar geleneksel olarak basılı medyada kullanılır (kağıda basılacak herhangi bir şey vb.). Bir nokta, bir inçin 1 / 72'sine eşittir. Noktalar, sabit boyutlu birimler olmaları ve boyut olarak ölçeklenememeleri açısından piksellere çok benzer.
4. Yüzde (%): Yüzde birimi, birkaç temel fark dışında "em" birimine çok benzer. Birincisi ve en önemlisi, mevcut yazı tipi boyutu% 100'e eşittir (yani 12pt =% 100). Yüzde birimini kullanırken, metniniz mobil cihazlar ve erişilebilirlik için tamamen ölçeklenebilir kalır.

Aynı problemi yaşadım, orijinal CSS'de şu satır vardı:

-webkit-text-size-ayarlama:% 120;

% 100 olarak değiştirmek zorunda kaldım ve her şey sorunsuzdu. Tüm pikselleri em veya %% olarak değiştirmeye gerek yok.

Ayrıca, işlediğiniz öğelerde "genişlik / yükseklik" ayarının olup olmadığını kontrol edin, Safari svg'lerde yazı tipi boyutuna göre boyutlandırma önceliği veriyor, Chrome ve FF'de yok, en azından şu anda görünüyor.