वेबसाइटों पर स्मार्टफोन की क्षमता को कैसे सक्षम करें

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

स्मार्टफोन ब्राउजिंग की सीमाएं

स्मार्टफोन ब्राउजिंग कंप्यूटर आधारित ब्राउजिंग से दो महत्वपूर्ण तरीकों से अलग है। सबसे पहले, एक स्मार्टफोन पर उपलब्ध स्क्रीन का आकार कंप्यूटर पर होने की तुलना में बहुत छोटा है, जिसका अर्थ है कि कुछ वेबसाइटें अव्यवस्थित दिखाई देंगी या कुछ मामलों में स्मार्टफोन पर अपठनीय होगी। एक स्मार्टफोन उपयोगकर्ता को ऐसी वेबसाइट पर स्क्रॉल या ज़ूम करना होगा जो कंप्यूटर देखने के लिए अनुकूलित है। दूसरे, स्मार्टफोन कर्सर की गति के बजाय क्लिक को छूने के लिए प्रतिक्रिया करते हैं, और इसलिए वेबसाइट के तत्व जो कर्सर आंदोलन के आधार पर बदलते हैं, स्मार्टफोन पर समस्याग्रस्त हो सकते हैं। उदाहरण के लिए, जब कर्सर उनके ऊपर मंडराता है, तो स्मार्टफोन पर वांछित तरीके से व्यवहार नहीं किया जाएगा क्योंकि होवरिंग स्मार्टफोन पर कुछ भी नहीं करता है। साथ ही, कुछ स्मार्टफोन उपयोगकर्ताओं के लिए ड्रॉप-डाउन मेनू समस्याग्रस्त हो सकता है।

सीएसएस सापेक्ष आकार

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

सीएसएस प्रदर्शन गुण

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

ब्राउज़र को पुनर्निर्देशित करना

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

वैकल्पिक HTML

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