मोबाइल डिवाइस, स्थिति: निश्चित; और इसका क्या परिणाम होता है

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

$('body').append("<div class='scroll-to-top-mobile'>Scroll To Top</div>"); //     $(window).scroll( function() { if ( $(this).scrollTop() > $(window).height() ) { //       , ... $('.scroll-to-top-mobile').fadeIn(); //   } else { //  , ... $('.scroll-to-top-mobile').fadeOut(); //   } }); $('.scroll-to-top-mobile').on('click', function() { $('html, body').animate({scrollTop : 0}, 800); //        return false; }); 

 .scroll-to-top-mobile { width: 100%; height: 20px; background: #e6e6e6; border-top: 1px solid #ddd; position: fixed; /*     ,          */ bottom: 0; /*      */ z-index: 9999; /*       */ text-align: center; display: none; /*     */ cursor: pointer; font-size: 12px; } 

यह डेस्कटॉप पर ठीक काम करता है, लेकिन एंड्रॉइड 2.3 पर परीक्षण के दौरान यह उस स्थिति से बाहर निकला : निश्चित; काम नहीं करता है, आइटम बिल्कुल तैनात है। थोड़ा खोज करने के बाद, यह पता चला कि iOS में संस्करण 5 तक और Android में संस्करण 3 तक निश्चित स्थिति का समर्थन नहीं किया गया है। अन्य ब्राउज़रों द्वारा सहायता यहाँ लिखी गई है ।

वे यह भी कहते हैं कि एंड्रॉइड 2.3 को मीडिया क्वेरी का उपयोग करके इस संपत्ति को समझने के लिए सिखाया जा सकता है:

 @viewport { user-zoom: fixed; } 

या मेटा टैग का उपयोग कर:

 <meta name=”viewport” content=”user-scalable=no” /> 

यह सुविधा पृष्ठ को स्केल करने की क्षमता को निष्क्रिय कर देती है।

अब, दस्तावेज़ को ज़ूम करने की संभावना के बिना, स्मार्टफोन स्क्रीन पर पाठ की पठनीयता का प्रश्न प्रासंगिक हो जाता है। डेस्कटॉप स्क्रीन पर पाठ का दृश्य आकार स्मार्टफोन स्क्रीन पर आकार से अलग है, इस बारे में यहां और अधिक। क्योंकि चूंकि ब्लॉग पूरी तरह से आरडब्ल्यूडी तकनीक पर बनाया गया है, इसलिए फोन के लिए एक अलग संस्करण बनाने का कोई मतलब नहीं है। मीडिया क्वेरी डिवाइस-पहलू-अनुपात की सहायता से मोबाइल उपकरणों की पहचान यहां मदद कर सकती है। यह फ़ंक्शन आपको निर्दिष्ट पहलू अनुपात वाले उपकरणों पर केवल इसमें मौजूद CSS का उपयोग करने की अनुमति देता है। IPhone पर, यह आंकड़ा 1.5 है, Android 1.3 - 1.5 पर। इस प्रकार, हम उन उपकरणों को निर्धारित कर सकते हैं जिनकी हमें आवश्यकता है और पृष्ठ पर उनके लिए इष्टतम फ़ॉन्ट आकार निर्धारित करें:

 @media all and (max-device-aspect-ratio: 1.5) { body { font-size: 16px; line-height: 1.4em; } } 

या मेटा टैग का उपयोग कर:

 <link rel=”stylesheet” href=”css/mobile.css” type=”text/css” media=”all and (max-device-pixel-ratio: 1.5)” /> 

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

 //   var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); if(mobile){ //    CSS var cssLink = document.createElement("link"); cssLink.setAttribute("type", "text/css"); cssLink.setAttribute("rel", "stylesheet"); cssLink.setAttribute("href", "css/mobile.css"); document.head.appendChild(cssLink); } 

navigator.userAgent उपयोगकर्ता-एजेंट की स्ट्रिंग लौटाता है, फिर हम इसे निर्दिष्ट उपकरणों में से एक के नाम के लिए देखते हैं। यदि यह मामला है, तो सीएसएस फ़ाइल के लिए इसके लिए एक लिंक बनाएं जिसमें पैरामीटर हैं जो हमें पाठ को मोबाइल स्क्रीन पर अनुकूलित करने की आवश्यकता है। सच है, क्योंकि स्क्रिप्ट केवल दस्तावेज़ लोड करने के बाद काम करती है, जुड़े हुए सीएसएस से पैरामीटर 1 - 1.5 सेकंड के बाद प्रभावी होते हैं।

इसलिए सरल 'स्क्रॉल टू टॉप' फ़ंक्शन समस्याओं की एक श्रृंखला को खींचता है, क्योंकि उनमें से प्रत्येक के लिए एक समाधान है।

संदर्भ

• स्थिति का समर्थन करने वाले ब्राउज़रों की सूची : निश्चित;
• जेएस का उपयोग कर एक मोबाइल डिवाइस को परिभाषित करना
• JS का उपयोग करके CSS लिंक बनाना