वेब ऐप्लिकेशन के लिए सबसे सही तरीके

मोबाइल डिवाइस के लिए वेब पेज और ऐप्लिकेशन डेवलप करने में, मॉडल बनाने में अलग-अलग चुनौतियां आती हैं. डेस्कटॉप वेब ब्राउज़र के लिए वेब पेज डेवलप करने तक का काम करते हैं. नीचे दिए गए तरीकों की मदद से, Android और अन्य मोबाइल डिवाइसेस के लिए सबसे प्रभावी वेब ऐप्लिकेशन है.

  1. मोबाइल डिवाइसों को अपनी वेबसाइट के लिए खास तौर पर बनाए गए मोबाइल वर्शन पर रीडायरेक्ट करें. कई ऐसा करने के लिए सर्वर-साइड रीडायरेक्ट का इस्तेमाल करता है. एक सामान्य तरीका है "स्निफ़" यह वेब ब्राउज़र से मिली उपयोगकर्ता एजेंट स्ट्रिंग. तय करने के लिए आपकी साइट का मोबाइल वर्शन दिखाना है या नहीं, तो "मोबाइल" उपयोगकर्ता एजेंट की स्ट्रिंग.
  2. HTML5 का इस्तेमाल करें का भी इस्तेमाल किया जा सकता है. HTML5, मोबाइल वेबसाइटों के लिए इस्तेमाल की जाने वाली सबसे सामान्य मार्कअप भाषा है. यह मानक, मोबाइल को प्राथमिकता देने वाले डेवलपमेंट को बढ़ावा देता है, ताकि यह पक्का किया जा सके कि वेबसाइटें अलग-अलग तरह के डिवाइसों पर काम करें डिवाइस. पिछली वेब भाषाओं के उलट, HTML5 आसान <DOCTYPE> और charset एलान: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. अपने वेब पेज का साइज़ सही तरीके से बदलने के लिए, व्यूपोर्ट मेटाडेटा का इस्तेमाल करें. आपके दस्तावेज़ में <head> में ऐसा मेटाडेटा शामिल करें जिससे यह पता चलता हो कि आपको ब्राउज़र के व्यूपोर्ट को कैसा दिखाना है अपने वेब पेज को रेंडर करने में मदद मिलती है. उदाहरण के लिए, आपका व्यूपोर्ट मेटाडेटा, ब्राउज़र का व्यूपोर्ट, शुरुआती पेज स्केल, और टारगेट स्क्रीन की सघनता.

    यहां दिए गए उदाहरण में, व्यूपोर्ट मेटाडेटा को सेट करने का तरीका बताया गया है:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Android पर चलने वाले डिवाइसों के लिए, व्यूपोर्ट मेटाडेटा का इस्तेमाल करने के तरीके के बारे में ज़्यादा जानकारी के लिए, वेब ऐप्लिकेशन में अलग-अलग स्क्रीन का इस्तेमाल करना पढ़ें.

  4. वर्टिकल लीनियर लेआउट का इस्तेमाल करें. स्क्रीन पर सबसे ऊपर बाईं और दाईं ओर स्क्रोल करने की ज़रूरत नहीं होती नेविगेट करना. उपयोगकर्ता के लिए ऊपर और नीचे स्क्रोल करना आसान होता है और इससे आपका पेज ज़्यादा आसान हो जाता है.
  5. लेआउट की ऊंचाई और चौड़ाई को match_parent पर सेट करें. सेट किया जा रहा है WebView ऑब्जेक्ट की ऊंचाई और चौड़ाई match_parent यह पक्का करता है कि आपके ऐप्लिकेशन के व्यू का साइज़ सही हो. हम यह सुझाव नहीं देते हैं कि ऊंचाई wrap_content तक सेट करें, क्योंकि इसका साइज़ गलत है. इसी तरह, सेटिंग में लेआउट की चौड़ाई wrap_content तक काम नहीं करती. इसकी वजह से आपका WebView इसके बजाय इसकी पैरंट चौड़ाई का इस्तेमाल करें. इस व्यवहार की वजह से, यह पक्का करना भी ज़रूरी है कि आपके WebView ऑब्जेक्ट के पैरंट लेआउट ऑब्जेक्ट में से, ऊंचाई और चौड़ाई को इस पर सेट किया गया है wrap_content.
  6. एक से ज़्यादा फ़ाइल अनुरोध करने से बचें. मोबाइल डिवाइस में आम तौर पर कनेक्शन स्पीड होती है डेस्कटॉप कंप्यूटर की तुलना में धीमा, अपने पेज को जल्द से जल्द लोड करें. उसकी रफ़्तार बढ़ाने का एक तरीक़ा यह है कि कृपया <head> में स्टाइलशीट और स्क्रिप्ट फ़ाइलों जैसी अतिरिक्त फ़ाइलों को लोड होने से रोकें. साथ ही, इन बातों पर ध्यान दें की मदद से मोबाइल विश्लेषण किया जा सकता है Google के PageSpeed Insights टूल का इस्तेमाल करके, खास तौर पर आपके ऐप्लिकेशन के लिए बेहतर ऑप्टिमाइज़ेशन से जुड़े सुझाव पाएं.

अन्य संसाधन