मेरे एक मित्र ने हाल ही में X थीम का उपयोग करके बनाई गई एक WordPress साइट के संबंध में सहायता मांगने के लिए मुझसे संपर्क किया था। उनके मुवक्किल ने उस सुबह उन्हें फोन किया था जब उन्होंने देखा कि उनकी वेबसाइट उनके आईफोन पर ठीक से प्रदर्शित नहीं हो रही थी। निक ने स्वयं इसकी जाँच की, और निश्चित रूप से, उनके द्वारा डिज़ाइन किया गया सुंदर प्रतिक्रियाशील डिज़ाइन अब काम नहीं कर रहा था।
वह इस तथ्य से और भी हैरान थे कि जब उन्होंने अपने डेस्कटॉप पर अपनी ब्राउज़र विंडो का आकार बदला, तो साइट उत्तरदायी थी, लेकिन उनके iPhone पर, केवल डेस्कटॉप संस्करण प्रदर्शित किया गया था। कोई साइट डेस्कटॉप कंप्यूटर पर प्रतिक्रियाशील और मोबाइल डिवाइस पर गैर-प्रतिक्रियाशील क्यों होगी?
रिस्पॉन्सिव डिज़ाइन काम क्यों नहीं करता
रिस्पॉन्सिव डिज़ाइन काम करना बंद कर देता है जब HTML फ़ाइल के हेडर में कोड की एक लाइन गायब हो जाती है। यदि कोड की यह एक पंक्ति गायब है, तो आपका iPhone, Android और अन्य मोबाइल उपकरण मान लेंगे कि जो वेबसाइट आप देख रहे हैं वह एक पूर्ण आकार की डेस्कटॉप साइट है और viewport का आकार समायोजित करेंपूरी स्क्रीन को शामिल करने के लिए।
व्यूपोर्ट और व्यूपोर्ट आकार से आपका क्या मतलब है?
सभी उपकरणों पर, व्यूपोर्ट का आकार उस वेबपेज के क्षेत्र के आकार को संदर्भित करता है जो वर्तमान में उपयोगकर्ता को दिखाई देता है। कल्पना कीजिए कि आपके पास 320 पिक्सेल की चौड़ाई वाला iPhone 5 है। जब तक अन्यथा स्पष्ट रूप से नहीं कहा जाता है, iPhones मानते हैं कि आपके द्वारा देखी जाने वाली प्रत्येक वेबसाइट 980px की चौड़ाई वाली एक डेस्कटॉप साइट है।
अब, अपने काल्पनिक iPhone 5 का उपयोग करके, आप डेस्कटॉप के लिए डिज़ाइन की गई वेबसाइट पर जाते हैं जो 800px चौड़ी है। इसमें प्रतिक्रियाशील लेआउट नहीं है, इसलिए आपका iPhone पूर्ण-चौड़ाई वाला डेस्कटॉप संस्करण प्रदर्शित करता है।
नहीं यह नहीं। व्यूपोर्ट आकार के साथ, स्केलिंग शामिल हो सकती है। वेबपेज का पूर्ण-चौड़ाई वाला संस्करण देखने के लिए iPhone को ज़ूम आउट करना होगा। याद रखें कि व्यूपोर्ट पृष्ठ के उस क्षेत्र को संदर्भित करता है जो वर्तमान में उपयोगकर्ता को दिखाई दे रहा है। क्या iPhone उपयोगकर्ता वर्तमान में पृष्ठ का केवल 320 पिक्सेल देख रहा है, या क्या वे पूर्ण-चौड़ाई वाला संस्करण देख रहे हैं?
यह सही है: वे अपने डिस्प्ले पर पूर्ण-चौड़ाई वाला वेबपेज देख रहे हैं क्योंकि iPhone ने इसे डिफ़ॉल्ट व्यवहार माना है: इसे ज़ूम आउट किया गया है ताकि उपयोगकर्ता 980 पिक्सेल की चौड़ाई तक का वेबपेज देख सके। इसलिए, iPhone का व्यूपोर्ट 980px है।
जैसे ही आप ज़ूम इन या आउट करते हैं, व्यूपोर्ट का आकार बदल जाता है। हमने पहले कहा था कि हमारी काल्पनिक वेबसाइट की चौड़ाई 800px है, इसलिए यदि आप अपने iPhone में ज़ूम करते हैं ताकि वेबसाइट के किनारे आपके iPhone के डिस्प्ले के किनारों को छू रहे हों, तो व्यूपोर्ट 800px होगा। आईफोन में डेस्कटॉप साइट पर 320 पीएक्स का व्यूपोर्ट हो सकता है, लेकिन अगर ऐसा होता है, तो आप केवल इसका एक छोटा सा हिस्सा देख पाएंगे।
मेरी प्रतिक्रियाशील वेबसाइट टूट गई है। मैं इसे कैसे ठीक करूं?
जवाब एचटीएमएल की एक लाइन है जो वेबपेज के हेडर में डाले जाने पर डिवाइस को व्यूपोर्ट को अपनी चौड़ाई (iPhone 5 के मामले में 320px) पर सेट करने के लिए कहती है न कि स्केल करने के लिए पृष्ठ (या ज़ूम) करें।
इस मेटा टैग से संबंधित सभी विकल्पों की अधिक तकनीकी चर्चा के लिए, इस लेख को tutsplus.com पर देखें।
Responsive ना होने पर WordPress X थीम को कैसे ठीक करें
पहले से मेरे मित्र के पास वापस जाएं: कोड की यह एक पंक्ति गायब हो गई जब उसने एक्स थीम को अपडेट किया। आपकी समस्या को ठीक करते समय, ध्यान रखें कि X थीम केवल एक शीर्षलेख फ़ाइल का उपयोग नहीं करती है – यह प्रत्येक स्टैक के लिए भिन्न शीर्षलेख फ़ाइलों का उपयोग करती है, इसलिए आपको अपनी शीर्षलेख फ़ाइलों को संपादित करना होगा।
चूंकि निक एक्स थीम के एथोस स्टैक का उपयोग करता है, इसलिए उसे हेडर फ़ाइल में पहले बताए गए कोड की पंक्ति को जोड़ना था जो x /frameworks/views/ethos/wp-header में स्थित था।php। यदि आप एक अलग स्टैक का उपयोग करते हैं, तो सही हेडर फ़ाइल खोजने के लिए 'ईथोस' के लिए अपने स्टैक का नाम (इंटेग्रिटी, रिन्यू, आदि) बदलें। वह एक लाइन डालें, और वोइला! आप जाने के लिए तैयार हैं।
तो यह मेरी CSS मीडिया क्वेरी को भी ठीक करता है?
जब आप अपनी HTML फ़ाइल के शीर्षलेख में वह पंक्ति डालते हैं, तो आपकी उत्तरदायी @मीडिया क्वेरीज़ अचानक से काम करना शुरू कर देंगी और आपकी वेबसाइट का मोबाइल संस्करण फिर से जीवंत हो जाएगा। पढ़ने के लिए धन्यवाद और मुझे उम्मीद है कि यह मदद करेगा!
Payette Forward करना याद रखें, डेविड पी.
