दिलचस्प पोस्ट
मैं सभी विराम चिह्नों को स्ट्रैगेज़ में एक स्ट्रिंग से regex का उपयोग कैसे कर सकता हूं? SwingUtilities.invokeLater रूबी फ़्लोटिंग बिंदु त्रुटियाँ ऑब्जेक्ट ओरिएंटेड प्रतिमान में ढीले युग्मन और तंग युग्मन के बीच अंतर क्या है? अजगर में अनुरोधों के साथ "मल्टीपार्ट / फ़ॉर्म-डेटा" कैसे भेजना है? एक्सेल शीट से डेट टाइम वैल्यू पढ़ना जांचें कि एकाधिक स्ट्रिंग किसी अन्य स्ट्रिंग में मौजूद हैं या नहीं जेएसपी पृष्ठ से ऑब्लेट पास करने के लिए ऑब्लेट पास करना Monomorphism प्रतिबंध क्या है? सी # के प्रयोग से, यह कैसे पता चलता है कि किस प्रक्रिया ने एक फाइल लॉक की है? मुझे मॉडल देखने का उपयोग क्यों करना चाहिए? एंड्रॉइड में एसिंक्टस्क बनाम थ्रेड अपरिभाषित फ़ंक्शन mysql_connect () एक java.lang.VerifyError प्राप्त करने के कारण मैं मॉलोक () के साथ कितना आवंटित किया है उससे ज्यादा स्मृति का उपयोग कर सकते हैं, क्यों?

आईओएस 8 ने "न्यूनतम-यूआई" व्यूपोर्ट की संपत्ति को हटा दिया, क्या अन्य "सॉफ्ट फुलस्क्रीन" समाधान हैं?

(यह एक बहु-भाग का प्रश्न है, मैं परिदृश्य को संक्षेप करने के लिए अपनी पूरी कोशिश करूंगा।)

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

समस्या के लिए एक आम दृष्टिकोण है एक आवरण div है जिसे ब्राउजर व्यूपोर्ट भरता है, overflow को hidden या auto सेट करता है, फिर क्षैतिज और / या इसके अंदर खड़ी रहें।

यह दृष्टिकोण महान है लेकिन एक मुख्य दोष है: क्योंकि दस्तावेज़ की ऊंचाई ब्राउज़र व्यूपोर्ट के समान है, मोबाइल ब्राउज़र पता बार / नेविगेशन मेनू को छिपाए नहीं जाएगा

कई हैक्स और व्यूपोर्ट गुण हैं जो हमें अधिक स्क्रीन अचल संपत्ति प्राप्त करने में सक्षम बनाते हैं, लेकिन minimal-ui रूप में कोई भी प्रभावी नहीं है (आईओएस 7.1 में पेश किया गया)।

समाचार कल आया था कि आईओएस 8 बीटा 4 ने मोबाइल सफारी से minimal-ui को हटा दिया था ( आईओएस 8 रिलीज नोट्स में वेबकिट अनुभाग देखें), जिससे हमें आश्चर्य हो रहा है:

Q1। क्या अब भी मोबाइल सफारी पर एड्रेस बार छिपाया जा सकता है?

जहां तक ​​हम जानते हैं, आईओएस 7 अब window.scrollTo . window.scrollTo हैक का जवाब नहीं देते , इससे पता चलता है कि हमें छोटे स्क्रीन स्पेस के साथ रहना होगा, जब तक कि हम कोई ऊर्ध्वाधर लेआउट नहीं लेते हैं या mobile-web-app-capable उपयोग करते हैं

Q2। क्या यह अभी भी एक समान सॉफ्ट फुलस्क्रीन अनुभव है?

सॉफ्ट फ़ुलस्क्रीन द्वारा मुझे वास्तव में mobile-web-app-capable मेटा टैग का उपयोग किए बिना मतलब है।

हमारे वेब ऐप को सुलभ बनाने के लिए बनाया गया है, किसी भी पेज को मूल ब्राउज़र मेनू का उपयोग करके बुकमार्क या साझा किया जा सकता है। mobile-web-app-capable जोड़कर हम ऐसे उपयोगकर्ताओं को ऐसे मेनू पर जाने से रोकते हैं (जब होमस्क्रीन पर सहेजा जाता है), जो उपयोगकर्ताओं को भ्रमित और विरोध करता है

minimal-ui मध्य-मैदान के रूप में इस्तेमाल किया जाता है, मेनू को डिफ़ॉल्ट रूप से छुपाता है, लेकिन यह एक नल के साथ सुलभ रखता है – हालांकि अन्य एक्सेस-योग्यता चिंताओं के कारण एप्पल ने इसे हटा दिया हो सकता है (जैसे उपयोगकर्ताओं को पता नहीं कि मेनू को सक्रिय करने के लिए कैसे टैप करना है) ।

Q3। परेशानी का एक पूर्ण स्क्रीन अनुभव है?

यह प्रतीत होता है कि एक पूर्णस्क्रीन एपीआई किसी भी समय जल्द ही आईओएस पर नहीं आ रही है, लेकिन यहां तक ​​कि अगर यह भी है, तो मुझे नहीं पता कि मेनू कैसे रखा जाएगा (वही एंड्रॉइड पर क्रोम के लिए)।

इस मामले में, शायद हमें मोबाइल सफारी को छोड़ देना चाहिए, और व्यूपोर्ट की ऊँचाई (iPhone 5+ के लिए) के लिए खाता है, यह 460 = 568 – 108 है, जहां 108 में ओएस बार, एड्रेस बार और नेविगेशन मेनू शामिल है; आईफोन 4 या पुराने, यह 372 है)।

कुछ विकल्प सुनना पसंद करेंगे (एक देशी ऐप बनाने के अलावा)

वेब के समाधान से एकत्रित समाधान "आईओएस 8 ने "न्यूनतम-यूआई" व्यूपोर्ट की संपत्ति को हटा दिया, क्या अन्य "सॉफ्ट फुलस्क्रीन" समाधान हैं?"

न्यूनतम-यूआई व्यूपोर्ट संपत्ति अब आईओएस 8 में समर्थित नहीं है । हालांकि, न्यूनतम-यूआई ही नहीं चला है। उपयोगकर्ता "स्पर्श-खींचें नीचे" इशारा के साथ न्यूनतम- UI दर्ज कर सकता है

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

ये अवलोकन आईओएस 8 के लिए ब्रिम-व्यू मैनेजर के विकास के भाग के रूप में अनुसंधान का एक परिणाम है। अंतिम कार्यान्वयन निम्नलिखित तरीके से काम करता है:

जब पेज लोड हो जाता है, Brim एक ट्रेडमिल तत्व पैदा करेगा। ट्रेडमिल तत्व को स्क्रॉल करने के लिए उपयोगकर्ता स्थान देने के लिए उपयोग किया जाता है। ट्रेडमिल तत्व की उपस्थिति यह सुनिश्चित करता है कि उपयोगकर्ता न्यूनतम- UI दृश्य दर्ज कर सकता है और यह जारी रहना जारी रखता है कि उपयोगकर्ता पृष्ठ पुनः लोड करता है या डिवाइस ओरिएंटेशन बदलता है। यह उपयोगकर्ता को पूरी समय अदृश्य है इस तत्व में आईडी brim-treadmill

पृष्ठ को लोड करने पर या अभिविन्यास बदलने के बाद, Brim स्पैम का उपयोग करके यह पता लगा सकता है कि पृष्ठ न्यूनतम-यूआई दृश्य में है (पृष्ठ जो कि कम से कम-यूआई में है और पुनः लोड किया गया है) सामग्री ऊँचाई है व्यूपोर्ट ऊंचाई से अधिक)

जब पेज न्यूनतम- UI में होता है, Brim दस्तावेज़ को स्क्रॉल कर देगा (यह एक सुरक्षित तरीके से करता है जो मुख्य तत्व की सामग्री को प्रभावित नहीं करता) दस्तावेज़ स्क्रॉल को अक्षम करना गलती से ऊपर स्क्रॉल करते समय न्यूनतम-यूआई को छोड़कर रोकता है मूल iOS 7.1 विशिष्ट के अनुसार, शीर्ष पट्टी को टैप करने से बाकी सभी क्रोम को वापस लाया जा सकता है।

अंतिम परिणाम इस तरह दिखता है:

आईओएस सिम्युलेटर में ब्रम

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

इस परियोजना के भाग के रूप में चिल्लाओ और अभिविन्यास का विकास किया गया है।

चूंकि minimal-ui नकल करने का कोई प्रोग्रामेटिक तरीका नहीं है, इसलिए हम अपने लाभ के लिए calc() और आईओएस एड्रेस बार की ऊँचाई का उपयोग कर एक अलग समाधान के साथ आए हैं:

निम्नलिखित डेमो पृष्ठ ( यहां पर उपलब्ध सारांश में अधिक तकनीकी विवरण ) उपयोगकर्ता को स्क्रॉल करने के लिए प्रेरित करेगा, जो फिर एक नरम-फुलस्क्रीन (पता बार / मेनू छिपाना) चलाता है, जहां हेडर और सामग्री नए व्यूपोर्ट को भरती हैं

 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scroll Test</title> <style> html, body { height: 100%; } html { background-color: red; } body { background-color: blue; margin: 0; } div.header { width: 100%; height: 40px; background-color: green; overflow: hidden; } div.content { height: 100%; height: calc(100% - 40px); width: 100%; background-color: purple; overflow: hidden; } div.cover { position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0, 0, 0, 0.5); color: #fff; display: none; } @media screen and (width: 320px) { html { height: calc(100% + 72px); } div.cover { display: block; } } </style> <script> var timeout; window.addEventListener('scroll', function(ev) { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(function() { if (window.scrollY > 0) { var cover = document.querySelector('div.cover'); cover.style.display = 'none'; } }, 200); }); </script> </head> <body> <div class="header"> <p>header</p> </div> <div class="content"> <p>content</p> </div> <div class="cover"> <p>scroll to soft fullscreen</p> </div> </body> </html> 

बस न्यूनतम-यूआई को अलविदा कहें (अभी के लिए)

यह सच है, minimal-ui दोनों उपयोगी और हानिकारक हो सकता है, और मुझे लगता है कि व्यापार-बंद अब एक और संतुलन है, नए, बड़े iPhones के पक्ष में।

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

संक्षेप में, मैं किसी भी रूप में न्यूनतम-यूआई को रोकना बंद कर दिया था, इसलिए कम से कम मेरी स्क्रीन ऊंचाई हमेशा एक समान है और आपको हमेशा पता है कि आपके ऐप के लिए वास्तविक स्थान क्या है।

समय की मदद से, पर्याप्त उपयोगकर्ता के पास अधिक कमरे होंगे


संपादित करें

मैं इसे कैसे करूँ

डेमो उद्देश्य के लिए यह थोड़ा सरलीकृत है, लेकिन आपके लिए काम करना चाहिए। मान लें कि आपके पास एक मुख्य कंटेनर है

 html, body, #main { height: 100%; width: 100%; overflow: hidden; } .view { width: 100%; height: 100%; overflow: scroll; } 

फिर:

  1. तो जेएस के साथ, मैं खिड़की की उपलब्ध ऊंचाई तक #main की ऊंचाई निर्धारित करता हूं यह आईओएस और एंड्रॉइड दोनों में पाए जाने वाले अन्य स्क्रॉलिंग बग से भी निपटने में मदद करता है। इसका मतलब यह भी है कि आपको इसे अपडेट करने के तरीके की आवश्यकता है, बस ध्यान दें कि;

  2. स्क्रॉल की सीमाओं तक पहुंचते समय मैं ओवर-स्क्रॉलिंग ब्लॉक करता हूं I यह मेरे कोड में थोड़ी अधिक गहरी है, लेकिन मुझे लगता है कि आप बुनियादी कार्यक्षमता के लिए इस उत्तर के सिद्धांत का अनुसरण कर सकते हैं। मुझे लगता है कि यह थोड़ा फ़्लिकर कर सकता है, लेकिन यह काम करेगा।


डेमो देखें (एक iPhone पर)

एक sidenote के रूप में: यह ऐप भी बुकमार्क करने योग्य है, क्योंकि यह हैटेड पतों पर आंतरिक रूटिंग का उपयोग करता है, लेकिन मैंने एक त्वरित आईओएस उपयोगकर्ताओं को घर में जोड़ने के लिए भी जोड़ा है मुझे लगता है इस तरह से वफादारी और लौटने वाले आगंतुकों (और इसलिए खोया स्थान वापस आ गया है) में सहायता करता है।

सबसे आसान तरीका मुझे इसे ठीक करने के लिए पाया गया था कि किसी भी अनुरोध के लिए शरीर और HTML तत्वों की ऊंचाई 100.1% तक सेट करें जहां उपयोगकर्ता एजेंट एक आईफोन था। यह केवल लैंडस्केप मोड में काम करता है, लेकिन मुझे सभी की जरूरत है

 html.iphone, html.iphone body { height: 100.1%; } 

इसे देखें https://www.360jungle.com/virtual-tour/25 पर

यहां की रूट समस्या यह है कि आईओएस 8 सफारी एडवर्ड्स बार को स्क्रॉल करते समय नहीं छिपाएगा, अगर सामग्री व्यूपोर्ट के बराबर या कम है।

जैसा कि आपने पहले से ही पाया है, नीचे कुछ पैडिंग जोड़ने से इस समस्या का पता चलता है:

 html { /* enough space to scroll up to get fullscreen on iOS8 */ padding-bottom: 80px; } 
 // sort of emulate safari's "bounce back to top" scroll window.addEventListener('scroll', function(ev) { // avoids scrolling when the focused element is eg an input if ( !document.activeElement || document.activeElement === document.body ) { document.body.scrollIntoViewIfNeeded(true); } }); 

उपरोक्त सीएसएस को सशर्त रूप से लागू किया जाना चाहिए, उदाहरण के लिए <html> को gt-ios8 कक्षा जोड़कर यूए सूँघने वाला।

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

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

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

..यह निश्चित रूप से परियोजना पर निर्भर करता है और अगर आपको मैंने जो भी उल्लेख किया है, उनमें से किसी की ज़रूरत है I Google, पर वर्णित कार्यक्षमता का उपयोग करने के लिए जीमेल के अतिप्रवाह तत्वों का उपयोग करता है a)। आईएमओ, यह समय के लायक है, यहां तक ​​कि पुरानी आईफ़ोन में छोटी ऊंचाई (372 पीएक्स जैसा कि आपने कहा था) पर विचार किया है।

मैं @ doublesharp से इस समाधान के पास आया और यह शानदार ढंग से मेरे लिए काम किया है, इसलिए मैंने सोचा कि मैं इसे यहां साझा करेगा:

 // track width, set to window width var width = $(window).width(); // fire on window resize $(window).resize(function() { // do nothing if the width is the same if ($(window).width()==width) return; // ... your code }); 

इसलिए, आईओएस 8 एड्रेस बार की तरह कुछ के लिए, जब आप नीचे स्क्रॉल करते हैं, तो पता बार रीसाइजिंग आपकी $ (विंडो) .resize () कोड को नहीं फेंक देगा।

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

आप इसे iPhone पर Safari में परीक्षण कर सकते हैं और ध्यान दें कि जब आप किसी पृष्ठ पर अधिक सामग्री देखने के लिए नीचे स्क्रॉल करते हैं, तो नेविगेशन / खोज बार स्वचालित रूप से छिपा होता है

शायद पता बार / नेविगेशन बार को छोड़कर, और पूर्ण-स्क्रीन अनुभव नहीं बना रहा, यह सबसे अच्छा है मुझे नहीं लगता कि एप्पल कभी भी जल्द ही ऐसा कर रहा है। और पता बार शो / छिपाए जाने पर अधिकतर वे स्वतः नियंत्रित नहीं होते हैं

बेशक, आप स्क्रीन अचल संपत्ति खो रहे हैं, विशेष रूप से आईफोन 4 या 4 एस पर, लेकिन बीटा 4 के रूप में कोई विकल्प नहीं प्रतीत होता है।