CSS और Safari का फ़ॉन्ट-आकार विचित्र

यह देखा गया है कि iPhones पर Safari अप्रत्याशित फ़ॉन्ट आकार संबंधी विसंगतियां प्रदर्शित करता है। विशेष रूप से, छोटे फ़ॉन्ट आकार (जैसे, 13px) वाला टेक्स्ट बड़े आकार (जैसे, 15px) वाले टेक्स्ट की तुलना में बड़ा दिखाई देता है। यह हैरान करने वाला व्यवहार सवाल उठाता है: क्या सफ़ारी के फ़ॉन्ट-आकार ओवरराइड के लिए सीएसएस-संबंधित या अन्य कारक ज़िम्मेदार हैं?

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

iPhone उपयोगकर्ताओं के लिए फ़ॉन्ट-आकार के भ्रम को खत्म करने के लिए यहां एक व्यावहारिक उदाहरण दिया गया है:

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

यह सीएसएस स्निपेट 480px (यानी, आईफोन डिवाइस) की अधिकतम डिवाइस चौड़ाई वाले सभी मोबाइल उपकरणों को लक्षित करता है और

निष्कर्ष में, मोबाइल सफारी की स्वचालित टेक्स्ट स्केलिंग का लक्ष्य छोटी स्क्रीन पर पठनीयता को अनुकूलित करना है। हालाँकि, इससे अप्रत्याशित फ़ॉन्ट-आकार व्यवहार हो सकता है। -वेबकिट-टेक्स्ट-साइज-एडजस्ट प्रॉपर्टी को नियोजित करके, डेवलपर्स फ़ॉन्ट आकार पर नियंत्रण हासिल कर सकते हैं और आईफोन सहित विभिन्न उपकरणों पर लगातार टेक्स्ट डिस्प्ले सुनिश्चित कर सकते हैं।