सफारी पर कुछ फॉन्ट-साइज़ बड़ा है (iPhone)

110

क्या सीएसएस या अन्य कारण हैं कि सफारी / आईफोन कुछ फ़ॉन्ट-आकार की सेटिंग्स की अनदेखी क्यों करेगा? IPhone पर मेरी विशेष वेबसाइट सफारी पर कुछ फ़ॉन्ट-आकार: 13px पाठ फ़ॉन्ट-आकार से बड़ा है: 15px पाठ। क्या यह शायद कुछ तत्वों पर फ़ॉन्ट-आकार का समर्थन नहीं करता है?

— एलेक्स
स्रोत

248

जो की प्रतिक्रिया में कुछ अच्छी सर्वोत्तम प्रथाएं हैं, लेकिन मुझे लगता है कि आप जिस समस्या का वर्णन इस तथ्य के इर्द-गिर्द कर रहे हैं, वह यह है कि मोबाइल सफारी स्वचालित रूप से पाठ को मापती है अगर उसे लगता है कि पाठ बहुत छोटा होगा। आप सीएसएस संपत्ति के साथ इसे प्राप्त कर सकते हैं -webkit-text-size-adjust। यहाँ सिर्फ iPhone के लिए इसे अपने शरीर पर लागू करने के तरीके का एक नमूना है:

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

— डेविड कानेडा
स्रोत

2

बस इस मुद्दे में भाग गया। यह छोटा मीडिया स्क्रीन हैक त्रुटिपूर्ण रूप से काम करता है। मैं इसे अपने CSS स्टार्टर फ़ाइल में शामिल करना शुरू करने जा रहा हूँ।

— थ्रोटलहेड

1

वाह, बीमार! मुझे पागल करने से पहले, मैंने इसे खोजने से पहले वर्ग नाम बदलने और jQuery के साथ सीएसएस इनलाइन सेट करने की कोशिश की। Lifesaver!

— क्रिस्टोफर बुबाक

1

इससे बहुत मदद मिली। चियर्स :)

— डेड मैन

2

मीडिया क्वेरी का उपयोग करना सुनिश्चित करें। ऐसा लगता है कि यह कुछ पाठ को पढ़ना मुश्किल बना सकता है: खबरदार-पाठ-आकार-समायोजन: कोई नहीं

— जेमू

9

उत्तर को अपडेट किया जाना चाहिए -webkit-text-size-adjust: 100%- यह स्वचालित अपडेट से बचा जाता है, लेकिन उपयोगकर्ता को ज़ूम करने की अनुमति देता है। (स्रोत)

— शॉन एर्खर्ट

14

कोई नहीं के बजाय 100% का उपयोग करें।

normalize.css में यह शामिल है

— user3276706
स्रोत

11

यह भी सुनिश्चित करें कि आप अपने व्यूपोर्ट मेटा टैग में प्रारंभिक जूम सेटिंग को 1 पर सेट कर रहे हैं:

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

— johnpolacek
स्रोत

7

मैं अब पिक्सेल परिभाषाओं का उपयोग नहीं करता हूं क्योंकि वे वास्तव में भ्रमित हैं और दृश्य सेवाओं में बिल्कुल समान नहीं हैं।

इकाइयों से मिलें

"एम्स" (ईएम): "एम" एक स्केलेबल इकाई है जिसका उपयोग वेब दस्तावेज़ मीडिया में किया जाता है। उदाहरण के लिए, इम वर्तमान फ़ॉन्ट-आकार के बराबर है, यदि दस्तावेज़ का फ़ॉन्ट-आकार 12pt है, तो 1em 12pt के बराबर है। Ems प्रकृति में स्केलेबल हैं, इसलिए 2em 24pt के बराबर होगा। 5em बराबर 6pt होगा, आदि। scalms और उनके मोबाइल-डिवाइस के अनुकूल प्रकृति के कारण Ems वेब दस्तावेज़ों में तेजी से लोकप्रिय हो रहे हैं।
पिक्सेल (px): पिक्सेल निश्चित आकार की इकाइयाँ होती हैं जिनका उपयोग स्क्रीन मीडिया में किया जाता है (अर्थात कंप्यूटर स्क्रीन पर पढ़ा जाना)। एक पिक्सेल कंप्यूटर स्क्रीन पर एक डॉट के बराबर है (आपकी स्क्रीन के रिज़ॉल्यूशन का सबसे छोटा विभाजन)। कई वेब डिज़ाइनर वेब दस्तावेज़ों में पिक्सेल इकाइयों का उपयोग करते हैं ताकि वे अपनी साइट के एक पिक्सेल-सही प्रतिनिधित्व का उत्पादन कर सकें क्योंकि यह ब्राउज़र में प्रदान किया गया है। पिक्सेल इकाई के साथ एक समस्या यह है कि यह दृष्टिहीन पाठकों के लिए ऊपर की ओर नहीं जाती है या मोबाइल उपकरणों को फिट करने के लिए नीचे की ओर नहीं होती है।
अंक (pt): अंक पारंपरिक रूप से प्रिंट मीडिया (कुछ भी जो कागज पर मुद्रित किया जाना है, आदि) में उपयोग किया जाता है। एक बिंदु एक इंच के 1/72 के बराबर है। अंक पिक्सेल की तरह होते हैं, इसमें वे निश्चित आकार की इकाइयाँ होती हैं और आकार में नहीं हो सकती।
प्रतिशत (%): प्रतिशत इकाई बहुत कुछ "एम" इकाई की तरह है, कुछ मूलभूत अंतरों के लिए बचाएं। सबसे पहले और सबसे महत्वपूर्ण, वर्तमान फ़ॉन्ट-आकार 100% (यानी 12pt = 100%) के बराबर है। प्रतिशत इकाई का उपयोग करते समय, आपका पाठ मोबाइल उपकरणों और पहुँच के लिए पूरी तरह से स्केलेबल रहता है।

4

उत्तर, पाठ के लिए 1 पूर्वनिर्धारित इकाई (यानी 12pt) का उपयोग करना है और फिर बाद के सभी सीएसएस के लिए फोंट-आकार का उपयोग करें: 90%; या फ़ॉन्ट-आकार: 110%; आदि। यह आपके सभी समर्थित उपकरणों के लिए अधिक आसानी से सुलभ है।

1

आप सबसे महत्वपूर्ण भूल गए: REM (संदर्भ EM)। आप इसे पूरे दस्तावेज़ में उपयोग कर सकते हैं और यह समान रहता है (यह कैस्केडिंग नहीं है)।

— एंड्रयू स्विफ्ट

3

यह उत्तर प्रासंगिक नहीं है और किसी भी तरह से प्रश्न का उत्तर नहीं देता है। प्रश्न समान आकार के ग्रंथों के बारे में था, जो अलग-अलग प्रतिपादन करते थे, न कि किस इकाई के उपयोग के बारे में। समस्या वास्तव में वहाँ रहती है जो भी इकाइयों का उपयोग किया जाता है।

— राउली राजन्दे

0

मुझे एक ही समस्या थी, मूल सीएसएस में पता चला कि यह रेखा थी:

-webkit- पाठ-आकार-समायोजन: 120%;

मुझे इसे 100% तक बदलना पड़ा, और सब कुछ सुचारू हो गया। सभी px को em या %% में बदलने की आवश्यकता नहीं है।

— me1974
स्रोत

डिज़ाइनर को फॉन्ट साइज़ वैसे भी उपयोग करने चाहिए।

— निक टर्नर

2

... बॉडी टैग सीएसएस को छोड़कर जहां एक पीएक्स आकार सबसे अच्छा है।

— मैट पार्किंस

0

यह भी जांचें कि क्या आपके पास उन तत्वों के लिए "चौड़ाई / ऊंचाई" सेट नहीं है, जिन्हें आप जोड़-तोड़ कर रहे हैं, सफारी svg's, क्रोम और FF में फ़ॉन्ट आकार पर पूर्वता दे रही है, ऐसा नहीं लगता है, वर्तमान में कम से कम।

— marebuffi
स्रोत