मेरी उत्तरदायी वेबसाइट काम नहीं कर रही है। द फिक्स: व्यूपोर्ट।

मेरे एक दोस्त ने हाल ही में मुझसे एक वर्डप्रेस साइट के साथ मदद के लिए संपर्क करने के लिए संपर्क किया जो उसने एक्स थीम का उपयोग करके बनाया था। उनके ग्राहक ने उन्हें उस सुबह फोन किया जब उन्होंने देखा कि उनकी वेबसाइट उनके iPhone पर सही ढंग से प्रदर्शित नहीं हो रही थी। निक ने खुद इसकी जाँच की, और निश्चित रूप से, जिस सुंदर उत्तरदायी डिज़ाइन को उन्होंने बनाया था, वह अब काम नहीं कर रहा है।

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

क्यों उत्तरदायी डिजाइन काम नहीं करता है

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

व्यूपोर्ट और व्यूपोर्ट साइज से आपका क्या मतलब है?

सभी उपकरणों पर, व्यूपोर्ट का आकार एक वेबपृष्ठ के क्षेत्र के आकार को संदर्भित करता है जो वर्तमान में उपयोगकर्ता को दिखाई देता है। कल्पना कीजिए कि आप 320 पिक्सेल की चौड़ाई के साथ iPhone 5 धारण कर रहे हैं। जब तक स्पष्ट रूप से अन्यथा नहीं बताया गया है, iPhones यह मानता है कि आपके द्वारा देखी जाने वाली प्रत्येक वेबसाइट 980px की चौड़ाई के साथ एक डेस्कटॉप साइट है।

अब, अपने काल्पनिक iPhone 5 का उपयोग कर,आप डेस्कटॉप के लिए डिज़ाइन की गई वेबसाइट पर जाएँ जो 800px चौड़ी है। इसमें एक उत्तरदायी लेआउट नहीं है, इसलिए आपका iPhone पूर्ण-चौड़ाई वाला डेस्कटॉप संस्करण प्रदर्शित करता है।

आईफोन पर प्रतिबंध नहीं मिल रहा है

लेकिन एक iPhone 5 केवल 320 पिक्सेल चौड़ा है। क्या यह हमेशा व्यूपोर्ट का आकार नहीं है?

नहीं यह नहीं। व्यूपोर्ट आकार के साथ, स्केलिंग शामिल हो सकता है । वेबपेज के पूर्ण-चौड़ाई संस्करण को देखने के लिए iPhone को ज़ूम आउट करना होगा। याद रखें कि व्यूपोर्ट उस पृष्ठ के क्षेत्र को संदर्भित करता है जो वर्तमान में उपयोगकर्ता को दिखाई देता है। क्या iPhone उपयोगकर्ता वर्तमान में पृष्ठ का केवल 320 पिक्सेल देख रहा है, या वे पूर्ण-चौड़ाई संस्करण देख रहे हैं?

यह सही है: वे अपने प्रदर्शन पर पूर्ण-चौड़ाई वाले वेबपृष्ठ को देख रहे हैं क्योंकि iPhone ने इसे डिफ़ॉल्ट व्यवहार मान लिया है: यह ज़ूम आउट हो गया है ताकि उपयोगकर्ता किसी वेबपृष्ठ को 980 पिक्सेल की चौड़ाई तक देख सके। इसलिए, iPhone का व्यूपोर्ट 980px है।

जैसे ही आप ज़ूम इन या आउट करते हैं, व्यूपोर्ट का आकार बदल जाता है। हमने पहले कहा था कि हमारी काल्पनिक वेबसाइट की चौड़ाई 800px है, इसलिए यदि आप अपने iPhone में ज़ूम करना चाहते थे ताकि वेबसाइट के किनारे आपके iPhone के डिस्प्ले के किनारों को छू सकें, तो व्यूपोर्ट 800px होगा। दी आईफोन कर सकते हैं एक डेस्कटॉप साइट पर 320px का व्यूपोर्ट है, लेकिन अगर यह किया गया है, तो आप केवल इसका एक छोटा हिस्सा देख सकते हैं।

छवि सक्रियण के दौरान एक त्रुटि हुई

माय रिस्पॉन्सिव वेबसाइट इज़ ब्रोकन। मैं इसे कैसे ठीक करूं?

उत्तर HTML की एक एकल पंक्ति है, जो किसी वेबपेज के हेडर में डाले जाने पर डिवाइस को व्यूपोर्ट को उसकी स्वयं की चौड़ाई (iPhone 5 के मामले में 320px) में सेट करने के लिए कहता है, न कि पेज को स्केल (या ज़ूम) करने के लिए।

इस मेटा टैग से संबंधित सभी विकल्पों की अधिक तकनीकी चर्चा के लिए, देखें यह लेख tutsplus.com पर ।

वर्डप्रेस एक्स थीम को कैसे ठीक करें जब यह उत्तरदायी नहीं है

पहले से मेरे मित्र पर वापस: कोड की यह एक पंक्ति गायब हो गई जब उसने एक्स थीम को अपडेट किया। आपका निर्धारण करते समय, ध्यान रखें कि X विषय केवल एक हेडर फ़ाइल का उपयोग नहीं करता है - यह हर स्टैक के लिए विभिन्न हेडर फ़ाइलों का उपयोग करता है, इसलिए आपको अपना संपादन करना होगा।

आईट्यून आईफोन नहीं देख सकता

चूंकि निक एक्स थीम के एथोस स्टैक का उपयोग करता है, इसलिए उसे हेडर फ़ाइल से पहले मेरे द्वारा उल्लेख किए गए कोड की लाइन को जोड़ना था जो एक्स में स्थित था /frameworks/views/ethos/wp-header.php । यदि आप एक अलग स्टैक का उपयोग करते हैं, तो सही हेडर फ़ाइल को खोजने के लिए os लोकाचार ’के लिए अपने स्टैक (अखंडता, नवीनीकृत, आदि) का नाम बदलें। उस एक लाइन को डालें, और वॉइला! आप जाने के लिए अच्छे हैं

तो यह मेरी सीएसएस मीडिया क्वेरी को ठीक करता है, भी?

जब आप अपनी HTML फ़ाइल के हेडर में उस लाइन को डालते हैं, तो आपके उत्तरदायी @मीडिया प्रश्न अचानक काम करना शुरू कर देंगे और आपकी वेबसाइट का मोबाइल संस्करण जीवन में वापस आ जाएगा। पढ़ने के लिए धन्यवाद और मुझे आशा है कि यह मदद करता है!

पैलेट फॉरवर्ड को याद रखें,
डेविड पी।