साइट के मोबाइल संस्करण का कनेक्शन

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

1. सर्वर साइड

HTTP अनुरोध में सर्वर को भेजे गए ब्राउज़र जानकारी (उपयोगकर्ता-एजेंट स्ट्रिंग) के विश्लेषण के आधार पर, या तो मोबाइल संस्करण के लिए शैली कनेक्ट करें या साइट के मोबाइल संस्करण के अनुरूप डोमेन नाम के लिए उपयोगकर्ता को पुनर्निर्देशित करें।

यदि मोबाइल संस्करण एक अलग डोमेन नाम पर स्थित है, तो आप meta.txt फ़ाइल का उपयोग कर सकते हैं। यह मोबाइल और कंप्यूटर संस्करणों के लिए प्रवेश बिंदु इंगित करता है।

Example.com के लिए एक उदाहरण meta.txt फ़ाइल (इस मामले में फ़ाइल पता example.com/meta.txt है ):

 नाम: example.com
 विवरण: example.com एक व्यापक रूप से उपयोग की जाने वाली वेबसाइट है
 कीवर्ड: उदाहरण, डेमो, प्रदर्शन
 पीसी: http://www.example.com
 मोबाइल: http://m.example.com
 rss: http: //rss.example.com/rss/topstories.xml
 rss: http: //rss.example.com/rss/politics.xml
 पॉडकास्ट: http://rss.example.com/podcasting/news.xml
 वीडियो: http://rss.example.com/rss/tutorial.xml
 देशांतर: 12.3456789
 अक्षांश: 98.7654321
 क्षेत्र: एम.एम. 

कंप्यूटर और मोबाइल संस्करणों के लिए प्रवेश बिंदु क्रमशः पीसी और मोबाइल लाइनों में परिभाषित किए गए हैं।

विपक्ष:

• नए ब्राउज़र बहुत बार दिखाई देते हैं; तदनुसार, UserAgent सूची को लगातार फिर से भरना होगा;
• अब तक हमेशा UserAgent को सही तरीके से परिभाषित नहीं किया गया है।

2. ग्राहक की तरफ

a) मीडिया विशेषता निर्दिष्ट करें

< link rel ="stylesheet" href ="site.css" media ="screen" /> <br> < link rel ="stylesheet" href ="mobile.css" media ="handheld" />

मान "स्क्रीन" एक नियमित कंप्यूटर से मेल खाता है, "हाथ में" एक मोबाइल डिवाइस है।

विपक्ष:

• कभी-कभी दोनों स्टाइलशीट (स्क्रीन और हैंडहेल्ड दोनों) लोड किए जाते हैं;
• कई आधुनिक उपकरणों द्वारा समर्थित नहीं है।

बी) मीडिया विशेषता के अंदर प्रश्नों का उपयोग करें

अधिकतर अक्सर, डिवाइस की चौड़ाई के आधार पर शैलियों को लोड किया जाता है:

< link rel = "stylesheet" href = "mobile.css" media = "only screen and (max-device width:480px)" />


सामान्य तौर पर, ऐसे प्रश्नों का उपयोग करके, आप बहुत सी चीजें निर्धारित कर सकते हैं: ब्राउज़र विंडो या डिवाइस की चौड़ाई और ऊंचाई, अभिविन्यास (चित्र या परिदृश्य), संकल्प, आदि।

माइनस: कई पुराने उपकरणों द्वारा समर्थित नहीं है।

ग) तरीकों का संयोजन

चूंकि उपरोक्त दोनों विधियां कई उपकरणों द्वारा समर्थित नहीं हैं, इसलिए स्मार्ट लोग उनके संयोजन के साथ आए:

< link rel = "stylesheet" href ="handheld.css" media ="handheld,only screen and (max-device-width:480px)" />


3. उपयोगकर्ता का चयन

आप उपयोगकर्ता को कुछ भी चुनने और परिभाषित करने का अधिकार प्रदान कर सकते हैं, लेकिन बस साइट के मोबाइल संस्करण के लिए एक लिंक बनाएं।

निष्कर्ष

यदि साइट का मोबाइल संस्करण केवल शैलियों में कंप्यूटर संस्करण से भिन्न होता है, तो उपरोक्त सभी विकल्प उपयुक्त हैं। यदि मोबाइल संस्करण के लिए HTML मार्कअप कंप्यूटर से अलग है, तो विधि 2 समाधान नहीं है।

यह पोस्ट एक लेख पर आधारित है: हाउ टू बिल्ड ए मोबाइल वेबसाइट

विषय पर उपयोगी सामग्री

मीडिया क्वेरीज़ - मीडिया क्वेश्चन के उपयोग के लिए W3C दिशानिर्देश
अपनी वेबसाइट का मोबाइल संस्करण बनाने के लिए CSS3 मीडिया क्वेरी का उपयोग कैसे करें - मोबाइल लेआउट में मीडिया के प्रश्नों के बारे में लेख
metaTXT: मोबाइल वेब ब्राउज़िंग और मीडिया की खोज में सुधार के लिए एक मानक - meta.txt का उपयोग करने पर विवरण
उपयोगकर्ता एजेंट - उपयोगकर्ता एजेंट विकि लेख