मोबाइल वेब डेवलपमेंट: कुछ विशेषताएं और टिप्स

एक मोबाइल एप्लिकेशन विकसित करते समय, मुझे कुछ चीजें मिलीं जिनके बारे में मुझे पता होना चाहिए था कि मैंने कब शुरू किया था। इसलिए मैंने छोटे सुझावों के प्रारूप में एक लेख लिखने का फैसला किया। ये सुझाव फोनगैप, विंडोज 8 और फायरफॉक्स ओएस के लिए मोबाइल एप्लिकेशन विकसित करने पर अधिक केंद्रित हैं। लेकिन मोबाइल वेबसाइट डेवलपर्स काम भी आ सकते हैं। लेख के अंत में मैं लिंक दूंगा कि आखिरकार क्या हुआ

मीडिया के चयनकर्ताओं पर भरोसा न करें।

खासकर Android पर। कीबोर्ड का उपयोग करते समय मीडिया चयनकर्ता काम करते हैं और आपको इसे भी संभालना होगा। यह एक वास्तविक नरक बनना शुरू हो जाता है अगर हमारे आवेदन में पोर्ट्रेट और लैंडस्केप के लिए एक अलग नज़र है। निम्नलिखित उदाहरण यह अच्छी तरह से प्रदर्शित करता है:

यदि हम 800px या उससे अधिक की रिज़ॉल्यूशन ऊंचाई वाले फोन पर अपना उदाहरण खोलते हैं, तो हम रंग ब्लॉक नहीं देखेंगे, क्योंकि एक मीडिया चयनकर्ता इसे लागू किया जाता है, लेकिन जब हम डेटा दर्ज करने के लिए इनपुट पर क्लिक करते हैं, तो कीबोर्ड खुलता है और ब्लॉक दिखाई देता है (खिड़की की ऊंचाई बदल जाती है), जो कि चीजों का एक तार्किक पाठ्यक्रम है। समाधान: स्क्रीन पर आधारित अभिविन्यास और परिवर्तन को बदलने के लिए जावास्क्रिप्ट का उपयोग करें ।availWidth और screen.availHeight गुण। ध्यान दें कि ये गुण फ़ायरफ़ॉक्स में काम नहीं करते हैं, जैसा कि ओरिएंटेकचेंज इवेंट करता है। इसी तरह का कोड हमें कुछ समय और प्रयास बचाने में मदद कर सकता है।

var displayModeLandscape = false; var width = 0; var height = 0; var setPortrait = function() { $('html').addClass('portrait').removeClass('landscape'); displayModeLandscape = false; }; var setLandscape = function() { $('html').addClass('landscape').removeClass('portrait'); displayModeLandscape = true; }; var currentOrientation = function() { width = screen.availWidth || $(window).width(); height = screen.availHeight || $(window).height(); if(height > width) { setPortrait(); } else { setLandscape(); } }; $(window).on('orientationchange', currentOrientation); currentOrientation(); 

Reset.css का विस्तार करें

मानक reset.css के लिए यह एक शैली जोड़ने के लिए उपयोगी होगा जो तपस में तत्वों के चयन को ओवरराइड करता है। यह सुंदर या तटस्थ नहीं लगेगा

 *:not(html) { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } 

ग्राफिक्स त्वरण का प्रयोग करें।

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

टेपों का उपयोग करें, क्लिकों का नहीं।

जब मैंने मोबाइल ब्राउज़र में क्लिक की प्रोसेसिंग की, तो मैंने पहले ही 300ms की देरी के बारे में लिखा था। इसलिए, तत्वों पर क्लिक को संभालने के लिए टैक और टैप ईवेंट का उपयोग करें। संबंधित लेख में इशारों के बारे में अधिक ।

जैसा कि आप उदाहरण से देख सकते हैं, डेस्कटॉप पर प्रोसेसिंग टच इवेंट और क्लिक इवेंट के बीच अंतर ~ 100 एमएस और ~ 400 मोबाइल ब्राउज़रों पर है

लोकलस्टोरेज और कैशिंग

उपयोगकर्ता जानकारी को कैश करने के लिए, साथ ही डिवाइस पर जानकारी संग्रहीत करने के लिए लोकलस्टोरेज का उपयोग करें। LocalStorage एक निरंतर भंडार है और जब आवेदन अद्यतन किया जाता है तो वह बना रहता है। लेकिन प्रतिबंधों के बारे में मत भूलना, उदाहरण के लिए, iOs पर अधिकतम आकार 5 एमबी है या कि एंड्रॉइड <3.2 पर वेबकिट संस्करण एक अपवाद फेंकता है जब JSON.parse (नल), अन्य सभी ब्राउज़र शून्य हो जाते हैं।

उपयुक्त उपकरण का उपयोग करें।

अनुप्रयोगों का परीक्षण करने के लिए एक उपयुक्त ब्राउज़र का उपयोग करें। यदि आप Android या iOS के लिए एप्लिकेशन विकसित कर रहे हैं, तो क्रोम का उपयोग करें, फ़ायरफ़ॉक्स ओएस के तहत - फ़ायरफ़ॉक्स, विंडोज 8 - IE10 के तहत। बहुत सारे एनीमेशन के साथ गेम और एप्लिकेशन विकसित करने के लिए, लाइब्रेरी https://github.com/mrdoob/stats.js/ भी उपयोगी होगी। या आप बिल्ट-इन क्रोम एफपीएस काउंटर का उपयोग कर सकते हैं। आपको बस क्रोम: // झंडे / और इसे सक्षम करने की आवश्यकता है। इसके अलावा, क्रोम में टेप का अनुकरण है - यह जेस्चर डिबगिंग में बहुत उपयोगी हो सकता है।

प्रोहिबिट स्केलिंग

निम्नलिखित टैग को हेड टैग में डालकर, आप स्केलिंग पर रोक लगाते हैं और इशारों को ट्रैक करने की क्षमता प्राप्त करते हैं।

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

इशारे का अनुकूलन।

जब आप अनुप्रयोग प्रदर्शन को बढ़ाने के लिए जेस्चर प्रसंस्करण की आवश्यकता नहीं है, तो stopDefault () और stopPropagination () चलाएँ।

अपना कोड ऑप्टिमाइज़ करें।

उपरोक्त सभी का यह मतलब नहीं होगा कि आपका कोड पागलपन से लंबा चलता है। पतले धब्बों को खोजने के लिए Profiler का उपयोग करें, जितना हो सके DOM को कम से कम अपडेट करने की कोशिश करें, और हमेशा डिलीट (छुपाने वाला) (डिस्प्ले: कोई नहीं) नोड्स जो आप उपयोग नहीं करते हैं। आपके पास जितना अधिक डोम होगा, उसके साथ संचालन धीमा होगा।

एक आफ्टरवर्ड के बजाय

ठीक है, अंत में, आप Google Play पर एप्लिकेशन को लाइव देख सकते हैं