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

मेरो एक साथीले हालसालै मलाई एक्स थिम प्रयोग गरेर निर्माण गरेको वर्डप्रेस साइटसँग मद्दतको लागि सम्पर्क गरे। उसको ग्राहकले उनलाई त्यो बिहान बोलाएको थियो जब उसले याद गरे कि उसको वेबसाइट आईफोनमा सही प्रदर्शन गरिरहेको छैन। निकले यो आफैंमा जाँचे, र यकिन छ, सुन्दर उत्तरदायी डिजाईन उसले काम गरिरहेको थिएन।

उहाँ यस तथ्यबाट अझ रहस्यमय हुनुभयो कि जब उनले आफ्नो डेस्कटप, साइटमा ब्राउजर विन्डो पुनःआकार गरे थियो उत्तरदायी, तर उनको आईफोन मा, केवल डेस्कटप संस्करण प्रदर्शित थियो। किन एक साइट हुनेछ एक डेस्कटप कम्प्यूटर मा उत्तरदायी र मोबाइल उपकरणमा गैर-उत्तरदायी?

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

उत्तरदायी डिजाइनले काम गर्न रोकिन्छ जब एक HTML फाइलको हेडरबाट कोडको एक लाइन हराइरहेको छ। यदि यो एकल कोड कोड हराइरहेको छ भने, तपाईंको आईफोन, एन्ड्रोइड, र अन्य मोबाइल उपकरणहरूले यो मान्दछ कि तपाईंले हेर्दै गरेको वेबसाइट पूर्ण आकारको डेस्कटप साइट हो र यसको आकार समायोजित गर्दछ भ्यूपोर्ट सम्पूर्ण स्क्रिन समेट्न।

तपाईको भ्यूपोर्ट र भ्यूपोर्ट आकारको मतलब के हो?

सबै उपकरणहरूमा, भ्यूपोर्टको आकारले वेबपृष्ठको क्षेत्रको आकारलाई जनाउँछ जुन हालसालै प्रयोगकर्तालाई देखिने छ। कल्पना गर्नुहोस् तपाईंले 3२० पिक्सलको चौडाई सहित आईफोन holding राख्नु भएको छ। स्पष्ट रूपमा अन्यथा नभएसम्म, आईफोनहरूले मान्दछ कि तपाईंले हेर्नु भएको हरेक वेबसाइट 980px चौडाईको डेस्कटप साइट हो।

अब, तपाईंको काल्पनिक आईफोन using प्रयोग गरेर,तपाईं डेस्कटपको लागि डिजाइन गरिएको वेबसाइट भ्रमण गर्नुहोस् जुन p००px चौडा छ। यो एक उत्तरदायी लेआउट छैन, त्यसैले तपाइँको आईफोन पूर्ण चौड़ाई डेस्कटप संस्करण प्रदर्शित गर्दछ।

आईफोनको स्क्रिन कालो भयो

तर आईफोन मात्र 20२० पिक्सेल चौडा हुन्छ। के त्यो सँधै भ्यूपोर्टको आकार हुँदैन?

होईन, यो छैन। भ्यूपोर्ट आकारको साथ, स्केलिंग संलग्न हुन सक्छ । वेबपृष्ठको पूर्ण चौडाई संस्करण हेर्न आईफोनले जूम आउट गर्नुपर्दछ। याद गर्नुहोस् कि भ्यूपोर्टले पृष्ठको क्षेत्रलाई जनाउँछ जुन हाल प्रयोगकर्तामा दृश्यात्मक छ। के आईफोन प्रयोगकर्ताले हाल पृष्ठको केवल 20२० पिक्सेल हेरिरहेको छ, वा तिनीहरू पूर्ण चौडाईको संस्करण हेरिरहेका छन्?

त्यो सहि हो: उनीहरूले पूर्ण चौडाइको वेबपृष्ठ उनीहरूको प्रदर्शनमा हेरेका छन् किनभने आईफोनले यसलाई पूर्वनिर्धारित व्यवहारको रूपमा लिएको छ: यो जुम आउट भएको छ ताकि प्रयोगकर्ताले page80० पिक्सेल चौडाईमा वेबपृष्ठ हेर्न सक्दछ। त्यसकारण, आईफोनको भ्यूपोर्ट 8080०px हो।

जब तपाईं जूम इन वा आउट गर्नुहुन्छ, भ्यूपोर्ट आकार परिवर्तन हुन्छ। हामीले भन्यौं कि हाम्रो काल्पनिक वेबसाइटको 800००px को चौडाइ छ, त्यसैले यदि तपाईं आफ्नो आईफोन जुम गर्नुहुन्थ्यो भने वेबसाइटको किनारहरूले तपाईंको आईफोनको प्रदर्शनको किनारहरू छोइरहनुभएको थियो भने भ्यूपोर्ट p०० px हुनेछ। आईफोन सक्छ डेस्कटप साइटमा 20२०px को भ्यूपोर्ट छ, तर यदि यो गरेको भए, तपाईंले यसको सानो अंश मात्र देख्नुहुनेछ।

कसरी आईफोन ब्याट्री समस्याहरु लाई ठीक गर्न को लागी

मेरो उत्तरदायी वेबसाइट टूटेको छ। कसरी म यसलाई ठीक गर्ने?

उत्तर एचटीएमएलको एकल लाइन हो जुन वेबपृष्ठको हेडरमा सम्मिलित गर्दा उपकरणलाई भ्यूपोर्ट सेट गर्न बताउँछ यसको आफ्नै चौडाई (20२०px आईफोन of को मामलामा) र पृष्ठ मापन (वा जूम) नगर्नु।

यस मेटा ट्याग सम्बन्धित सबै विकल्पहरूको अधिक प्राविधिक छलफलको लागि, जाँच गर्नुहोस् tutsplus.com मा यो लेख ।

कसरी WordPress X थीम फिक्स गर्ने जब यो उत्तरदायी हुँदैन

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

ITunes आईफोन देख्न सक्दैनन्

चूंकि निकले X थिमको इथोस स्ट्याक प्रयोग गर्दछ, उसले हेडर फाईलमा x उल्लेख गरेको कोडको लाइन थपेको थियो। /frameworks/views/ethos/wp-header.php । यदि तपाइँ फरक स्ट्याक प्रयोग गर्नुहुन्छ भने, सही हेडर फाइल फेला पार्नको लागि 'ईथोस' को लागी तपाईंको स्ट्याकको नाम (पूर्णता, नवीकरण, आदि) बदल्नुहोस्। त्यो एउटा रेखा घुसाउनुहोस्, र भोइला! तपाई राम्रो हुनुहुन्छ।

त्यसो भए यसले मेरो सीएसएस मीडिया प्रश्नहरू पनि फिक्स गर्दछ?

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

अगाडी Payette लाई सम्झनुहोस्,
डेभिड पी।