मोबाइल डिवाइस के लिए वेबसाइट कैसे बनाये

शैलियों

उपयोगकर्ता एजेंट

मोबाइल डिवाइस के लिए शैलियों को सक्षम करने का एक तरीका उपयोगकर्ता एजेंट का उपयोग करना है जो सर्वर क्लाइंट से प्राप्त करता है।
यह स्क्रिप्ट के एक सेट द्वारा मदद की जा सकती है: code.google.com/p/mobileesp , साथ ही यैंडेक्स एपि.इंडेक्स.ru/detector की एक सेवा
उपयोगकर्ता एजेंट के साथ काम करते समय, केवल एक समस्या लगातार उभर रहे नए उपयोगकर्ता एजेंटों की है।

ग्राहक पक्ष

पहले इस दृष्टिकोण का उपयोग किया गया था:

  <लिंक rel = "स्टाइलशीट" href = "site.css" मीडिया = "स्क्रीन" />
 <लिंक rel = "स्टाइलशीट" href = "mobile.css" मीडिया = "हैंडहेल्ड" />

मीडिया = "स्क्रीन" के साथ लाइन एक नियमित कंप्यूटर से मेल खाती है, मीडिया = "हैंडहेल्ड" एक मोबाइल डिवाइस है। नए उपकरण इस दृष्टिकोण को छोड़ रहे हैं और मीडिया विशेषता के अंदर प्रश्नों का उपयोग करना आवश्यक है।

उदाहरण के लिए, 480px या उससे कम की स्क्रीन चौड़ाई वाले उपकरणों के लिए, हम कोड का उपयोग करेंगे:

  <लिंक rel = "स्टाइलशीट" href = "mobile.css" मीडिया = "केवल स्क्रीन और (अधिकतम-डिवाइस-चौड़ाई: 480px)" />

दोनों विधियों को मिलाकर, आप लिख सकते हैं:

  मीडिया = "हैंडहेल्ड, केवल स्क्रीन और (अधिकतम-डिवाइस-चौड़ाई: 480px)" 

उपयोगकर्ता की पसंद

यह देखते हुए कि हमेशा यह निर्धारित करना संभव नहीं है कि कोई डिवाइस मोबाइल है या नहीं, आप उपयोगकर्ता को यह चुन सकते हैं कि वह किन शैलियों का उपयोग करना चाहता है।

शैलियों में क्या लिखना है

1. मल्टी-कॉलम लेआउट से छुटकारा पाएं
2. सेट प्रदर्शन: कोई नहीं; महत्वहीन तत्वों पर
3. तत्वों के आसपास मार्जिन कम करें
4. चित्रों का उपयोग कम करें, विशेष रूप से बड़ी पृष्ठभूमि
5. छोटे पाठ का आकार बढ़ाकर पाठ की पठनीयता बढ़ाएं।
6. तैरते हुए तत्वों को बाहर फेंक दें
7. ध्यान दें कि माउसओवर इवेंट्स काम नहीं करते हैं।

शैलियों के अलावा क्या

कई मोबाइल डिवाइस इस फोन नंबर प्रविष्टि को समझते हैं:

  <a href="tel:15032084566" class="phone-link"> (503) 208-4566 </a>

कुछ डिवाइस पहले से ही HTML5 का समर्थन करते हैं, इसलिए आप इन उदाहरणों का उपयोग कर सकते हैं:

  <इनपुट प्रकार = "टेल" />
 <इनपुट प्रकार = "ईमेल" /> 

HTML5 टैग ब्राउज़र-साइड सत्यापन की अनुमति देते हैं और उचित वर्ण सेट खोलते हैं।

आयाम और अभिविन्यास

आधुनिक मोबाइल डिवाइस आमतौर पर पूरे स्क्रीन को फिट करने के लिए पेज को स्केल करते हैं।
यह हमेशा सुविधाजनक नहीं होता है। ब्राउज़र के इस व्यवहार को बदलने के लिए, आपको व्यूपोर्ट विशेषता के साथ मेटा टैग का उपयोग करने की आवश्यकता है। उदाहरण के लिए:

  <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = 320" /> 

इस परिभाषा का अर्थ है कि डिवाइस पर पृष्ठ के 320 पिक्सेल दिखाई देंगे।
आप स्केलिंग को अक्षम भी कर सकते हैं:

  <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = 320, उपयोगकर्ता-मापनीय = गलत" /> 

आप उपकरण के उन्मुखीकरण के आधार पर शैलियों को भी जोड़ सकते हैं:

 @import url ("pict.css") सभी और (ओरिएंटेशन: पोर्ट्रेट);
 @import url ("लैंडस्केप। एड") सभी और (ओरिएंटेशन: लैंडस्केप); 

जैसा कि आप समझते हैं, पोर्ट्रेट ओरिएंट फ़ाइल का उपयोग पोर्ट्रेट ओरिएंटेशन और लैंडस्केप के लिए लैंडस्केप के लिए किया जाएगा।

ओरिएंटेशन डिटेक्शन सभी उपकरणों द्वारा समर्थित नहीं है, स्क्रीन की चौड़ाई निर्धारित करने के लिए अधिकतम-चौड़ाई का उपयोग करना अधिक विश्वसनीय है।

IPhone विशेष नोट्स

1. iPhone एडोब फ्लैश का समर्थन नहीं करता है
2. टैग समर्थित नहीं है

  <इनपुट प्रकार = "फ़ाइल" /> 

क्योंकि फ़ाइल संरचना में कोई पहुँच नहीं है।
3. 25 Kb से अधिक की फाइलें कैश नहीं की जाती हैं
4. @ फॉन्ट-फेस के साथ समस्याएं हैं - बाहरी फोंट लोड करने का उपयोग करना। फोंट पर लेख भी देखें।

लेकिन आप जावास्क्रिप्ट पुस्तकालयों का उपयोग कर सकते हैं जो आप विशेष iPhone सुविधाओं का उपयोग करने के लिए उपयोग कर सकते हैं। Sencha टच , jQTouch, और iui देखें । ये लाइब्रेरी एंड्रॉइड के साथ भी काम करती है। इसके अतिरिक्त, एक jQuery मोबाइल उत्पादन जारी होने की उम्मीद है।

IPhone शैली पृष्ठ प्रदर्शित करने वाली CSS फ्रेमवर्क भी देखें

आप निम्नलिखित सिंटैक्स का उपयोग करके साइट के लिए अपना खुद का आइकन भी बना सकते हैं:

  <लिंक rel = "ऐप्पल-टच-आइकन" href = "/ customIcon.png" /> 

आइकन पीएनजी प्रारूप में 57x57 पिक्सेल होना चाहिए। एंड्रॉइड भी ऐसे आइकन को समझता है।

लेख www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website पर लेख पर आधारित है

अतिरिक्त पढ़ने के लिए लिंक

* मोबाइल वेब विकास राज्य - 3 भागों में मोबाइल विकास पर चर्चा
* मोबाइल स्टाइलशीट की वापसी - शैलियों का उपयोग करना
* Hardboiled CSS3 मीडिया क्वेरी - उपकरणों को कैसे स्टाइल करें
* मोबाइल के लिए सीएसएस मीडिया क्वेरी फ़ूल का सोना है - मीडिया के सवालों के खिलाफ तर्क
* मोबाइल वेब डिज़ाइन - डिज़ाइन
* मोबाइल ऑपरेटिंग सिस्टम और ब्राउज़र विपरीत दिशाओं में चलते हैं - मोबाइल उपकरणों की दुनिया में दिशा -निर्देश
* पॉकेट-साइज़ डिज़ाइन: अपनी वेबसाइट को छोटे पर्दे पर ले जाना एक पुराना लेकिन फिर भी उपयोगी लेख है।