डायनामिक टेक्स्ट आकार बदलना

एक प्रतिक्रियाशील वेब इंटरफ़ेस बनाने की खोज में, आपको एक बाधा का सामना करना पड़ा है: जबकि छवियां सहजता से अपने आकार को अनुकूलित करती हैं जैसे ही विंडो का आकार बदलता है, टेक्स्ट दृढ़तापूर्वक स्थिर रहता है। इस समस्या को हल करने से आपका उपयोगकर्ता अनुभव बेहतर हो सकता है, यह सुनिश्चित करते हुए कि पेज की सामग्री व्यूपोर्ट आयामों की परवाह किए बिना पठनीय और सौंदर्य की दृष्टि से सुखद बनी रहे।

बचाव के लिए jQuery

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

यह कैसे काम करता है

jQuery स्क्रिप्ट मॉनिटर करती है विंडो आकार बदलने की घटनाएँ। पता चलने पर, यह पूर्वनिर्धारित मानक ऊंचाई की तुलना में विंडो की ऊंचाई में प्रतिशत परिवर्तन की गणना करता है जिस पर पाठ का आकार इष्टतम होता है। यह प्रतिशत तब आधार फ़ॉन्ट आकार पर लागू होता है, जिसके परिणामस्वरूप फ़ॉन्ट आकार का आनुपातिक समायोजन होता है।

कार्यान्वयन

अपने पृष्ठ में निम्नलिखित जावास्क्रिप्ट कोड शामिल करें:

$(function() {
    $(window).bind('resize', function()
    {
        resizeMe();
        }).trigger('resize');
    });
function resizeMe() {
//Standard height, for which the body font size is correct
var preferredHeight = 768;
//Base font size for the page
var fontsize = 18;

var displayHeight = $(window).height();
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) - 1;
$("body").css("font-size", newFontSize);
}

स्क्रिप्ट के पीछे का जादू

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