माझ्या एका मित्राने अलीकडेच त्याने एक्स थीम वापरुन तयार केलेल्या वर्डप्रेस साइटची मदत मागण्यासाठी माझ्याशी संपर्क साधला. त्याची वेबसाइट त्याच्या आयफोनवर योग्य प्रकारे प्रदर्शित होत नाही हे लक्षात आल्यानंतर त्याच्या क्लायंटने त्याला त्या दिवशी सकाळी फोन केला होता. निकने स्वत: हे तपासून पाहिले आणि इतके नक्कीच, त्याने डिझाइन केलेले सुंदर उत्तरदायी डिझाइन आता कार्य करत नाही.
जेव्हा त्याने डेस्कटॉप, ब्राउझरच्या विंडोचा आकार बदलला तेव्हा साइटवर त्याच्या जागेची जाणीव झाली होते उत्तरदायी, परंतु त्याच्या आयफोनवर, फक्त डेस्कटॉप आवृत्ती प्रदर्शित केली गेली. साइट का असेल डेस्कटॉप संगणकावर प्रतिसाद आणि मोबाइल डिव्हाइसवर प्रतिसाद न देणारा?
उत्तरदायी डिझाईन का कार्य करत नाही
HTML फाईलच्या शीर्षलेखातून कोडची एक ओळ गहाळ झाल्यावर प्रतिसाद डिझाइन कार्य करणे थांबवते. ही एकल कोड कोड गहाळ झाल्यास, आपला आयफोन, Android आणि अन्य मोबाइल डिव्हाइस आपण पहात असलेली वेबसाइट एक पूर्ण-आकारातील डेस्कटॉप साइट आहे आणि त्याचा आकार समायोजित करेल असे गृहित धरेल व्ह्यूपोर्ट संपूर्ण स्क्रीन व्यापणे.
व्ह्यूपोर्ट आणि व्ह्यूपोर्ट आकार म्हणजे काय?
सर्व डिव्हाइसवर, व्ह्यूपोर्टचा आकार वापरकर्त्यास सध्या दृश्यमान असलेल्या वेबपृष्ठाच्या क्षेत्राचा आकार दर्शवितो. कल्पना करा की आपण 320 पिक्सेल रूंदीसह आयफोन 5 ठेवत आहात. अन्यथा स्पष्टपणे सांगितले जात नाही तोपर्यंत iPhones असे गृहीत धरते की आपण भेट दिलेली प्रत्येक वेबसाइट 980px रुंदीची डेस्कटॉप साइट आहे.
आता, आपला काल्पनिक आयफोन 5 वापरुन,आपण डेस्कटॉपसाठी डिझाइन केलेल्या वेबसाइटला भेट द्या जी 800px रूंद आहे. यात प्रतिसाद देणारा लेआउट नाही, म्हणून आपला आयफोन पूर्ण-रूंदीची डेस्कटॉप आवृत्ती प्रदर्शित करते.
आयट्यून्स आयफोन 7 ओळखणार नाही
पण आयफोन 5 फक्त 320 पिक्सल रूंद आहे. व्ह्यूपोर्टचा आकार नेहमीच असतो ना?
नाही हे नाही. व्ह्यूपोर्ट आकारासह, स्केलिंग यात सामील असू शकते . वेबपृष्ठाची पूर्ण रूंदी आवृत्ती पाहण्यासाठी आयफोनला झूम कमी करणे आवश्यक आहे. लक्षात ठेवा व्ह्यूपोर्ट सध्या वापरकर्त्यास दृश्यमान असलेल्या पृष्ठाच्या क्षेत्राचा संदर्भ देते. आयफोन वापरकर्ता सध्या पृष्ठाचे फक्त 320 पिक्सेल पहात आहे किंवा त्यांना पूर्ण-रुंदीची आवृत्ती पहात आहे?
ते खरे आहे: ते त्यांच्या प्रदर्शनवर पूर्ण-रुंदीचे वेबपृष्ठ पहात आहेत कारण आयफोनने डीफॉल्ट वर्तन गृहित धरले आहे: ते झूम केले आहे जेणेकरुन वापरकर्ता 980 पिक्सल रूंदीपर्यंत वेबपृष्ठ पाहू शकेल. म्हणून, आयफोनचे व्ह्यूपोर्ट 980 पीएक्स आहे.
आपण झूम वाढवताना किंवा दर्शवित असताना व्ह्यूपोर्ट आकार बदलतो. आम्ही यापूर्वी म्हटले आहे की आमच्या काल्पनिक वेबसाइटची रूंदी 800 पीएक्स आहे, म्हणून जर आपण आपल्या आयफोनवर झूम वाढवत असाल तर वेबसाइटच्या कडा आपल्या आयफोनच्या प्रदर्शनाच्या काठास स्पर्श करत असल्यास व्ह्यूपोर्ट 800 पीएक्स असेल. आयफोन करू शकता डेस्कटॉप साइटवर 320px चे व्ह्यूपोर्ट आहे, परंतु ते तसे झाले तर आपल्याला त्यातील एक छोटासा भाग दिसू शकेल.
माझा फोन व्हॉइसमेल वर का जातो?
माझी प्रतिक्रियाशील वेबसाइट तुटलेली आहे. मी हे कसे निश्चित करू?
उत्तर एचटीएमएलची एक ओळ आहे जी वेबपृष्ठाच्या शीर्षलेखात घातली जाते तेव्हा डिव्हाइसला त्याच्या स्वतःच्या रुंदीवर व्ह्यूपोर्ट सेट करण्यास सांगितले जाते (आयफोन 5 च्या बाबतीत 320px) आणि पृष्ठ मोजण्याचे (किंवा झूम करणे) नाही.
|या मेटा टॅगशी संबंधित सर्व पर्यायांच्या अधिक तांत्रिक चर्चेसाठी, पहा tutsplus.com वर हा लेख .
वर्डप्रेस एक्स थीम उत्तरदायी नसते तेव्हा त्याचे निराकरण कसे करावे
पूर्वीपासून माझ्या मित्राकडे परत: त्याने एक्स थीम अद्यतनित केली तेव्हा कोडची ही एक ओळ गायब झाली. आपले निराकरण करताना, हे लक्षात ठेवा की एक्स थीम फक्त एक शीर्षलेख फाइल वापरत नाही - ती प्रत्येक स्टॅकसाठी भिन्न शीर्षलेख फायली वापरते, जेणेकरून आपल्याला आपली संपादन करावे लागेल.
आयफोन स्क्रीनचा वरचा अर्धा भाग काम करत नाही
निक ने थीमचा इथोस स्टॅक वापरल्याने, x मध्ये स्थित असलेल्या शीर्षलेख फाईलवर मी आधी उल्लेख केलेला कोडची ओळ जोडावी लागली. /frameworks/views/ethos/wp-header.php . जर आपण भिन्न स्टॅक वापरत असाल तर अचूक शीर्षलेख फाइल शोधण्यासाठी आपल्या स्टॅकचे नाव (अखंडता, नूतनीकरण इ.) त्याऐवजी ‘इथॉस’ ला द्या. ती एक ओळ घाला, आणि व्होइला! तू जायला छान आहेस.
तर हे माझे सीएसएस मीडिया क्वेरी निराकरण करते, खूप?
जेव्हा आपण ती एचटीएमएल फाईलच्या शीर्षलेखात घातली, तेव्हा आपल्या प्रतिक्रियाशील @ मीडिया क्वेरी अचानक पुन्हा कार्य करण्यास सुरवात करतील आणि आपल्या वेबसाइटची मोबाइल आवृत्ती पुन्हा जिवंत होईल. वाचनाबद्दल धन्यवाद आणि मला आशा आहे की हे मदत करेल!
पुढे पेटी लक्षात ठेवा,
डेव्हिड पी.