हैलो, हाबरा!

यह लेख पिछले लेख (जावास्क्रिप्ट से एपीके। Http://habrahabr.ru/company/ifree/blog/214531/ ) की निरंतरता है। मैं मोबाइल साइटों के विकास पर कुछ सुझाव देने की कोशिश करूंगा, जो कि आई-फ्री में सेवाओं और उत्पादों के साथ मेरे अनुभव से विकसित हुए हैं।





मोबाइल वेबसाइट डेवलपर्स के लिए, सभी फोन तीन समूहों में विभाजित हैं:

• पुश-बटन, नो टच इवेंट सपोर्ट
• टचस्क्रीन के साथ, टच इवेंट सपोर्ट
• स्मार्टफोन

2014 में पुराने पुश-बटन फोन कहां से आए?



अतीत की विरासत। पहले, फोन काफी उच्च गुणवत्ता वाले और बहुत लंबे समय तक चल सकते थे। उदाहरण के लिए, नोकिया 3310 के बारे में कई कहानियां हैं जो आप शब्द के शाब्दिक अर्थों में कंक्रीट और हथौड़ा के नाखूनों पर फेंक सकते हैं। चूंकि ये फोन काम करते हैं, और उन्हें बड़ी मात्रा में बेचा गया था, अब भी ऐसे लोग हैं जो उनका उपयोग करते हैं।



2014 में नए पुश-बटन फोन कहां से आए?



नए J2ME फोन का उत्पादन बाजार के निचले हिस्से को भरता है। ऐसे फोन में कई गुणात्मक अंतर होते हैं:

• वे बहुत सस्ते हैं। अक्सर उन्हें बच्चों द्वारा खरीदा जाता है ताकि उन्हें खोना या तोड़ना इतना दयनीय न हो
• इस तरह के फोन बहुत कम बिजली की खपत करते हैं, और उनकी चार्जिंग एक सप्ताह तक चल सकती है।
• एक नियम के रूप में, गुणवत्ता और सादगी का निर्माण इन फोनों को काफी चरम स्थितियों में काम करने की अनुमति देता है। उन्हें दीवारों में फेंक दिया जा सकता है, एक बड़ी ऊंचाई से गिरा दिया गया, प्रदर्शन के लिए बहुत नुकसान के बिना दफन और डूब गया।

ऐसे फोन के लिए साइट कौन बनाता है?



एक नियम के रूप में, ये बहुत बड़ी कंपनियां हैं जो अपनी सेवाओं को यथासंभव सुलभ बनाने की कोशिश करती हैं (उदाहरण के लिए, Google, Yandex, Mail)। इस मामले में मुद्दे की कीमत कोई मायने नहीं रखती है। इसके अलावा, सभी फोन में मानक बुकमार्क होते हैं, जिसमें विक्रेता के निर्माता, निर्माता या कंपनी की वेबसाइट को सीवन किया जाता है। ऐसी साइटों पर आप विभिन्न सामग्री (खेल, चित्र, धुन) खरीद सकते हैं या किसी भी सेवा की व्यवस्था कर सकते हैं। क्योंकि चूंकि बहुत सारे फोन हैं, तो ऐसी साइटों पर बहुत बड़ा भार हो सकता है।



सरल फोन के लिए सुविधाएँ लेआउट:

• जावास्क्रिप्ट काम नहीं कर सकता है। इसे कम से कम इस्तेमाल करने की कोशिश करें।
• सीएसएस स्थिति काम नहीं कर सकती (और वास्तव में कई सीएसएस गुण)
• यहां तक ​​कि कुकी तंत्र भी काम नहीं कर सकता है।
• उपयोगकर्ताओं के पास हमेशा धीमा इंटरनेट होता है। पृष्ठों को यथासंभव छोटा और सरल बनाएं।
• उपयोगकर्ता विशेष रूप से लिंक के माध्यम से आगे बढ़ता है (कम से कम, यह सबसे सुविधाजनक है)। इसलिए, पृष्ठ को जल्दी से नेविगेट करने के लिए "एंकर" का उपयोग करने का प्रयास करें।
• क्योंकि बहुत सी चीजें काम नहीं कर सकती हैं, तो आपको HTML3 मानकों के अनुसार टाइप करना पड़ सकता है
• कुछ फोन पर, ब्राउज़र पेज को बंद किए बिना भाषा लेआउट या उत्तर एसएमएस को स्विच करना बहुत मुश्किल या असंभव है। इसलिए, प्रतिक्रिया में एसएमएस हमेशा पृष्ठ पर लौटने के लिए एक लिंक होना चाहिए, इनपुट फ़ील्ड यथासंभव कम होनी चाहिए।
• लगभग सभी सरल फोनों में एड्रेस बार को देखना / बदलना असंभव है।

टूटी हुई कुकीज़ को बायपास कैसे करें?



ऐसे मामलों में, एक नियम के रूप में, सीएमएस स्तर पर, एक तंत्र लागू किया जाता है जो स्वचालित रूप से उपयोगकर्ता के सत्र संख्या को पेज पर सभी लिंक के पैरामीटर के रूप में जोड़ता है। उदाहरण के लिए, इससे पहले:

http://wap.samsung.ru/games/index.do
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और उसके बाद:

 http://wap.samsung.ru/games/index.do?id=8592387483239423722732
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

स्क्रीन आकार



एक नियम के रूप में, अधिकांश पुश-बटन फोन की स्क्रीन चौड़ाई संख्याओं से मेल खाती है: एक के बराबर DPI के साथ 120, 176, 240, 320। लेकिन किसी भी मामले में, रबर अप करें। यह पता नहीं है कि फोन में क्या डिस्प्ले होगा। इसके अलावा, ब्लैकबेरी और नोकिया के निर्माता "लैंडस्केप" के एक पहलू अनुपात वाले फोन का उत्पादन करना पसंद करते हैं, जिसमें प्रदर्शन की चौड़ाई ऊंचाई से अधिक है।



टचस्क्रीन डिवाइस बहुत बेहतर व्यवहार करते हैं, लेकिन वे आदर्श से बहुत दूर हैं। इसके अलावा, खराब टच स्क्रीन पर इनपुट फॉर्म में कुछ दर्ज करना पुश-बटन फोन की तुलना में कहीं अधिक कठिन है।



स्मार्टफ़ोन अभी भी बेहतर हैं, और अक्सर वे पीसी से व्यवहार में भिन्न नहीं होते हैं, लेकिन मानक ब्राउज़र छोटे बग ले सकते हैं। उदाहरण के लिए, हमारा परीक्षण नोकिया लूमिया स्थिति नहीं कर सकता है: निश्चित और दुर्घटनाग्रस्त हो जाएगा यदि हम कंसोल (कंसोल.लॉग / कंसोल। कुछ भी असेंबली उत्पादन कोड में नहीं होना चाहिए)।







इसके अलावा, अक्सर एक त्रुटि होती है जिसमें टच फोन को एक गैर-स्पर्श संस्करण दिया जाता है। समस्या यह है कि खराब टच स्क्रीन से कसकर स्थित लिंक में प्रवेश करना बहुत मुश्किल है, क्योंकि उंगली का आकार लिंक के आकार से कई गुना अधिक है। या, टच-संस्करण बनाते समय, वे ब्राउज़र की सुविधाओं के बारे में भूल जाते हैं, और पृष्ठ तत्व ब्राउज़र इंटरफ़ेस के नियंत्रण में आता है।



संचालक और सामग्री



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







सामग्री में ही इतने सारे दृश्य हो सकते हैं। उदाहरण के लिए, गेम निर्माताओं को यह विचार करना चाहिए कि फोन स्क्रीन आकार और ऑपरेटिंग सिस्टम दोनों में भिन्न हैं। इसके अलावा, हर कोई गेम के अंतिम निर्माण का वजन कम करना चाहता है। इसलिए, J2ME फोन के लिए एक गेम में 20 अलग-अलग असेंबली हो सकती हैं, जो फोन मॉडल पर निर्भर करती है। ऐसे मामलों में फोन आमतौर पर उपयोगकर्ता-एजेंट द्वारा विभाजित होते हैं, और कॉम्पैक्टनेस के लिए उन्हें कार्यक्षमता के आधार पर समूहों में जोड़ा जाता है। डेटाबेस में प्रत्येक खेल को समर्थित समूहों की एक श्रृंखला सौंपी जाती है।



आधुनिक स्मार्टफोन के लिए एक ऐसी ही स्थिति उभरने लगी है। फिलहाल, बिक्री पर आप ओएस के साथ फोन पा सकते हैं: एंड्रॉइड (संस्करण 2 और 4), आईओएस, विंडोज फोन, आदि। वे Tizen और FireFox OS लॉन्च करने की भी तैयारी कर रहे हैं। इसके अलावा, टैबलेट और छोटे फोन पहले से ही विभिन्न विधानसभाओं को इकट्ठा करना शुरू कर रहे हैं, जैसा कि टैबलेट को उच्च गुणवत्ता में संसाधनों की आवश्यकता होती है, और यह छोटे फोन को हैवीवेट बनाने के लिए कोई मतलब नहीं रखता है। इसके अलावा, फोन निर्माता अपने स्वयं के संपादन कर सकते हैं और अपने उपकरणों के लिए ऑपरेटिंग सिस्टम को संशोधित कर सकते हैं। इसलिए, यह संभावना है कि गेम नोकिया फोन पर आसानी से चलता है, लेकिन फ्लाई या हुआवेई पर काम नहीं करता है, और इसके विपरीत।

टच स्क्रीन

टच-स्क्रीन का उपयोग करते समय, उपयोगकर्ता, एक नियम के रूप में, पॉइंट क्लिक के बजाय इशारों का उपयोग करते हैं। नतीजतन, पृष्ठ पर पाठ, साथ ही नियंत्रण, बाहर खड़े हो सकते हैं। इससे बचने के लिए, CSS में आपको हर चीज के लिए चयन को अक्षम करना चाहिए:

 *, body { -moz-user-select: -moz-none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

लेकिन यह नियम इनपुट फ़ील्ड पर लागू नहीं होना चाहिए:

 input, textarea { -moz-user-select: text; -o-user-select: text; -khtml-user-select: text; -webkit-user-select: text; user-select: text; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

इसके अलावा, आपको <textarea> पर आकार बदलना चाहिए, क्योंकि उसे अपना आकार नहीं बदलना चाहिए:

 input, textarea { resize: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यदि आप अपने एप्लिकेशन के डिज़ाइन को पूरी तरह से नियंत्रित करना चाहते हैं, तो फोंट की स्वतः-कटौती को भी अक्षम करना न भूलें:

 *, body { -webkit-text-size-adjust: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

स्क्रीन को छूने पर ब्रेक और रेंडरिंग बंद हो जाते हैं।



यदि आपके पास DOM तत्वों का उपयोग करने वाला किसी भी प्रकार का एनीमेशन है, तो ब्राउज़र प्रदर्शन पर क्लिक करने के क्षण में पेज रेंडरिंग को रोक सकता है और घटना समाप्त होने पर जारी रख सकता है।



यह इस तथ्य के कारण है कि आमतौर पर केवल क्लिक की जाने वाली घटनाओं को तत्वों पर लटका दिया जाता है, स्पर्श के बारे में भूल जाते हैं। फोन, बदले में, तब तक इंतजार करता है जब तक कि घटना समाप्त न हो जाए और उसे पहचानने की कोशिश करें और उसके बाद ही पृष्ठ के साथ काम करना जारी रखें।



देरी को हटाने के लिए, घटनाओं को क्लिक करने के बजाय, आपको एक समान स्पर्श घटना, साथ ही संबंधित घटनाओं जैसे कि टचमोव और टचेंड को लटकाए जाने की आवश्यकता है। यहां तक ​​कि अगर आपके पास उनके लिए कॉलबैक फ़ंक्शन नहीं है, तो भी आपको कम से कम कॉल बंद करना चाहिए। इस प्रकार, जब आप प्रदर्शन पर क्लिक करते हैं, तो फोन देखेगा कि जावास्क्रिप्ट अपने आप ही स्पर्श को संसाधित करना चाहता है और तुरंत पृष्ठ पर नियंत्रण लौटा देगा।



क्लिक पर पीला और नीला हाइलाइट।



जब आप किसी भी पृष्ठ तत्व पर क्लिक करते हैं, तो एंड्रॉइड ~ 2 के साथ सभी डिवाइस पीले रंग के साथ तत्व को उजागर करते हैं, और एंड्रॉइड के साथ डिवाइस ~ 4 ओएस - एक नीली भराव के साथ।







CSS में निम्न कोड का उपयोग करके पीला भराव हटा दिया जाता है:

 *, body { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-focus-ring-color: rgba(0,0,0,0); outline: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

तत्व पर सभी स्पर्श-घटनाओं को इंटरसेप्ट करते समय ब्लू फिल गायब हो जाएगा (स्क्रीन को छूने पर आइटम "ब्रेक और रेंडरिंग रोकें")।



सुरक्षात्मक स्क्रीन



जब आप तस्वीर पर अपनी उंगली रखते हैं, तो सभी स्मार्टफ़ोन वर्तमान में इसे सहेजने की पेशकश करते हैं, जिससे उपयोगकर्ता को हमारे सिस्टम के साथ बातचीत करने से रोका जा सके। ऐसी स्थितियों को बाहर करने के लिए, एक सुरक्षात्मक पारदर्शी ब्लॉक का उपयोग करें जो पूरी स्क्रीन तक फैला हुआ है और इसमें अन्य सभी एनीमेशन तत्वों की तुलना में बड़ा z- इंडेक्स है, और इस पर होने वाली सभी क्लिक और टच घटनाओं को रोकता है।







एप्लिकेशन बनाते समय, एक सुरक्षात्मक स्क्रीन की भूमिका आमतौर पर नियंत्रक तत्वों द्वारा निभाई जाती है जो समान रूप से संपूर्ण स्क्रीन पर वितरित की जाती हैं, जिससे घटनाओं को अंतर्निहित तत्वों पर गिरने से रोका जा सकता है।



ऑन-स्क्रीन कीबोर्ड



मोबाइल एप्लिकेशन और साइट विकसित करते समय, कई डेवलपर्स और इंटरफ़ेस डिज़ाइनर ऑन-स्क्रीन कीबोर्ड के बारे में भूल जाते हैं। इसलिए, बहुत बार ऐसी परिस्थितियां होती हैं जिनमें पानी में इनपुट फ़ील्ड उपयोगकर्ता को दिखाई नहीं देते हैं।







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







इनपुट तत्वों का उपयोग करते समय, उन्हें शब्दार्थ के अनुसार टाइप करने के लिए सेट करें। उदाहरण के लिए:

 <input type="text"/> <input type="email"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

दोनों के बीच अंतर यह है कि जब आप ई-मेल दर्ज करते हैं, तो फोन कीबोर्ड को बदल देगा और @ साइन को एक प्रमुख स्थान पर रख देगा। एड्रेस बार में साइट एड्रेस दर्ज करते समय एक ही स्कीम काम करती है - फोन आमतौर पर लेआउट में छोटे बदलाव करते हैं और स्पीड डायलिंग के लिए ".com" प्रदर्शित करते हैं। इस लेखन के समय, यैंडेक्स के ऑपरेटिंग सिस्टम वाले स्मार्टफोन द्वारा सबसे अच्छे परिणाम दिए गए थे। उनके पास रूसी और अंग्रेजी पात्रों के साथ-साथ आउटपुट के साथ एक मानक क्वर्टी कीबोर्ड था। यह उपयोगकर्ताओं के लिए बहुत सुविधाजनक है, जैसा कि कई अंग्रेजी लेआउट में रूसी पासवर्ड दर्ज करने के लिए उपयोग किया जाता है।



पता बार छिपाएं







एंड्रॉइड फोन पर एड्रेस बार को छिपाने के लिए, आपको दस्तावेज़ की न्यूनतम ऊंचाई बढ़ाने, एक पिक्सेल को स्क्रॉल करने और न्यूनतम ऊंचाई को अपनी सामान्य स्थिति में वापस करने की आवश्यकता है। मेरे पास इसके लिए कोई तार्किक स्पष्टीकरण नहीं है, यह सिर्फ उसी तरह से काम करता है।



घटना देरी







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



स्क्रॉल करने की समस्या



एक और समस्या जो वेब डेवलपर्स अक्सर फोन पर हल करना भूल जाते हैं, वह पृष्ठ को स्क्रॉल करते समय स्थिति को याद रखना है।



मान लीजिए आपके पास एक लंबी सूची है। आप इसके अंत में हैं। आप एक नया पृष्ठ खोलते हैं, और फिर किसी कारण से आप सूची में वापस जाने का निर्णय लेते हैं। एक नियम के रूप में, डेवलपर्स लोकलस्टोरेज में स्क्रॉल मूल्य लिखना भूल जाते हैं और उसी स्थान पर लौटने के बजाय, हम सूची के शीर्ष पर लौट आते हैं।