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

Question

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

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

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

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

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

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

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

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

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

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

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

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

Q3। क्या फुलस्क्रीन अनुभव परेशानी के लायक है?

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

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

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

Comments

देखते हैं stackoverflow.com/questions/18793072/… अधिक विवरण के लिए क्यों न्यूनतम-यूआई कुछ ऐप के लिए महत्वपूर्ण हो सकता है।

— बिटिन

मैं iOS 7 पर एक ही समस्या में भाग गया, जैसा कि हम स्वाइप / स्क्रॉल ईवेंट्स के साथ एक वेब ऐप बनाने के लिए देख रहे हैं, लेकिन iOS8 बीटा 4 और onScroll घटनाओं का परीक्षण किया है और वे काम करते हैं। ios8-scroll-events.heroku.com यकीन है कि अगर सब पर मदद करता है, लेकिन नहीं है .. आप है कि आप के लिए जा रहा है।

— डेविन मैकनिनिस

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

— A1exandr

Answer 1

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

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

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

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

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

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

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

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

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

Comments

यह मेरे मूल उत्तर की तुलना में अधिक विस्तृत है, नए उत्तर के रूप में तब तक चिह्नित किया जाता है जब तक कि बेहतर समाधान नहीं आ जाता है :)

— बिटिन नोव

अच्छा लग रहा है! क्या मैं प्रारंभिक स्क्रॉल के बिना न्यूनतम-यूआई को बाध्य कर सकता हूं?

— INT

यह वास्तव में कभी न खत्म होने वाली कहानी है। मैं HTML में एक गेम डेवलपर हूं और iOS 7.1 में न्यूनतम-यूआई ने ठीक काम किया है - यह एक ऐसा तरीका था जिसमें एक ऐप फुलस्क्रीन चल रहा था और साथ ही स्क्रीन के निचले भाग में टच करने में सक्षम था। पृष्ठ स्वाइपिंग के साथ समाधान अच्छे हैं, लेकिन पर्याप्त नहीं हैं :( Apple, हमें गेम्स के लिए पूर्ण स्क्रीन एपीआई के उचित कार्यान्वयन की आवश्यकता है।

— पेट्र अर्बन

@Petr: मैं और अधिक सहमत नहीं हो सकता। जब इस फिक्स को 7.1 में घोषित किया गया था, तो हमने जल्दी से एक नया चेकआउट खरीद प्रवाह शुरू किया, जिसने प्राथमिक सीटीए को स्क्रीन के निचले हिस्से में पिन किया .. यह काम किया और महान रूपांतरित किया! यह बहुत "देशी" और सहज महसूस किया। जो मुझे लगता है कि सटीक समस्या है। यदि आप इसके बारे में सोचते हैं, तो देशी महसूस करने के लिए वेब ऐप्स के लिए यह एपल्स के सर्वोत्तम हित में नहीं है। यह वास्तव में उनके ऐप स्टोर के एकाधिकार के साथ हितों का सीधा टकराव है। यह, IMO, एकमात्र वैध कारण है कि एक ऐसा फीचर जिसके कारण इतनी समझदारी तय की गई और फिर जानबूझकर हटा दिया गया। # my2Cents :)

— जोस ब्राउन

@PetrUrban मुझे विश्वास है कि Apple आपको अपने गेम को फ़ोनगैप ऐप के रूप में प्रकाशित करना पसंद करेगा, जिससे आप वेब पर सेवा कर सकें। सफारी के लिए विज्ञापन अवरोधकों को इस विचार को अनुमति देने के लिए उनका हालिया निर्णय।

— पैट्रिक गुंडरसन

Answer 2

चूंकि नकल करने के लिए कोई प्रोग्रामेटिक तरीका नहीं है 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>

Answer 3

अल-यूईई (अभी के लिए) को अलविदा कहें

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

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

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

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

---

संपादित करें

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

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

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

फिर:

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

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

---

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

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

Comments

न्यूनतम-यूआई को अक्षम करने के लिए मुझे बहुत उचित लगता है। कृपया, कैसे करें के लिए संक्षिप्त विवरण शामिल करें!

— इस्तवान पेलिंक दास

आप ठीक कह रहे हैं, मैंने थोड़ा-सा जोड़ा। कई अन्य तरीके काम करेंगे।

— फ्रांसेस्को फ्रापेटी 13

मेरे iPhone 5 के अनुसार आपका डेमो iOS8 पर काम नहीं करता है।

— dmr07

मुझे बताने के लिए धन्यवाद, यह कुछ अद्यतन होना चाहिए क्योंकि यह काम करता था। क्या आप सफारी में हैं? क्या आप वास्तव में यह काम नहीं करता है के साथ क्या मतलब है?

— फ्रांसेस्को फ्रापेटी

Answer 4

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

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

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

Comments

धन्यवाद @ स्टीफन ऊंचाई: 100.1% ने मेरी मदद की। हालाँकि, जब मैंने iPhone (iOS 11.1.1) सफारी पर 360jungle.com/virtual-tour/25 खोला और नीचे के बटनों पर क्लिक किया, तो पता और टूल बार दिखाई दिया। ऐसा इसलिए है क्योंकि बटन प्रदर्शन के अंत के बहुत करीब हैं। मुझे लगता है कि मोबाइल मोड पर उन्हें कहीं और ले जाना बेहतर होगा।

— तेवा

Answer 5

यहाँ मूल समस्या यह है कि iOS8 सफारी पता पट्टी को छुपाएगी नहीं जब सामग्री के बराबर या व्यूपोर्ट से कम है तो नीचे स्क्रॉल करें।

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

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 e.g. an input
    if (
        !document.activeElement
        || document.activeElement === document.body
    ) {
        document.body.scrollIntoViewIfNeeded(true);
    }
});

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

Comments

यह जेएस वास्तव में क्या करता है?

— बेन सिनक्लेयर

यदि आप scrollIntoViewIfNeededइसका उल्लेख कर रहे हैं , तो यह scrollIntoView( developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView ) की एक गैर मानक व्युत्पत्ति है । जैसा कि नाम का अर्थ है, विधि तत्व को दृश्य में स्क्रॉल करती है। trueपैरामीटर तत्व के शीर्ष के साथ दृश्य को संरेखित करने के लिए कहता है। इस प्रभाव में आपको स्क्रॉल करने से रोकना चाहिए। कार्यान्वयन हालांकि त्रुटिपूर्ण है।

— गजस

Answer 6

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

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

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

.. बेशक यह परियोजना पर निर्भर करता है और अगर आपको मेरे द्वारा बताई गई किसी भी कार्यक्षमता की आवश्यकता है। Google ने मेरे द्वारा बताई गई कार्यक्षमता का उपयोग करने के लिए जीमेल के लिए ओवरफ्लो तत्वों का उपयोग किया है। Imo, यह समय के लायक है, यहां तक ​​कि पुराने iphones में छोटी ऊंचाई (372px जैसा कि आपने कहा) पर विचार किया।

Answer 7

यह संभव है, नीचे दिए गए उदाहरण की तरह कुछ का उपयोग करके जो मैंने ( https://gist.github.com/bitinn/1700068a276fb29740a7) काम की मदद से एक साथ रखा ) iOS 11 पर काफी काम नहीं करता था:

यहां संशोधित कोड iOS 11.03 पर काम करता है, कृपया टिप्पणी करें कि क्या यह आपके लिए काम करता है।

कुंजी बॉडी में कुछ आकार जोड़ रही है ताकि ब्राउज़र स्क्रॉल कर सके, पूर्व: ऊंचाई: कैल्क (100% + 40px);

अपने ब्राउज़र में देखने के लिए पूर्ण नमूना नीचे और लिंक करें (कृपया परीक्षण करें!)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeHots iOS WebApp Minimal UI via Scroll Test</title>

    <style>
        html, body {
            height: 100%;
        }
        html {
            background-color: red;
        }
        body {
            background-color: blue;
            /* important to allow page to scroll */
            height: calc(100% + 40px);
            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;

        function interceptTouchMove(){
            // and disable the touchmove features 
            window.addEventListener("touchmove", (event)=>{
                if (!event.target.classList.contains('scrollable')) {
                    // no more scrolling
                    event.preventDefault();
                }
            }, false); 
        }

        function scrollDetect(event){
            // wait for the result to settle
            if( timeout ) clearTimeout(timeout);

            timeout = setTimeout(function() {
                console.log( 'scrolled up detected..' );
                if (window.scrollY > 35) {
                    console.log( ' .. moved up enough to go into minimal UI mode. cover off and locking touchmove!');
                    // hide the fixed scroll-cover
                    var cover = document.querySelector('div.cover');
                    cover.style.display = 'none';

                    // push back down to designated start-point. (as it sometimes overscrolls (this is jQuery implementation I used))
                    window.scrollY = 40;

                    // and disable the touchmove features 
                    interceptTouchMove();

                    // turn off scroll checker
                    window.removeEventListener('scroll', scrollDetect );                
                }
            }, 200);            
        }

        // listen to scroll to know when in minimal-ui mode.
        window.addEventListener('scroll', scrollDetect, false );
    </script>
</head>
<body>

    <div class="header">
        <p>header zone</p>
    </div>
    <div class="content">
        <p>content</p>
    </div>
    <div class="cover">
        <p>scroll to soft fullscreen</p>
    </div>

</body>

पूर्ण उदाहरण लिंक यहां: https://repos.codehot.tech/misc/ios-webapp-example2.html

Answer 8

आईओएस और एंड्रॉइड दोनों में पूर्ण स्क्रीन में एक वेब एप्लिकेशन चलाना संभव है, इसे पीडब्ल्यूए कहा जाता है और मूक मेहनत के बाद, यह इस मुद्दे के आसपास का एकमात्र तरीका था।

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

Answer 9

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

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

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

ज़रूर, आप स्क्रीन रियल एस्टेट खो रहे हैं, विशेष रूप से एक iPhone 4 या 4S पर, लेकिन बीटा 4 के रूप में कोई विकल्प नहीं लगता है।

Comments

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

— बिटिन

यह अब एक सीमा के कुछ हो सकता है कि बीटा 4 ने उस सुविधा को हटा दिया है। यह संभव है और संभावना है कि Apple स्वचालित रूप से एड्रेस बार को नियंत्रित कर रहा है और डेवलपर्स को इसे एक्सेस करने से रोक रहा है।

— 13

I haven't done web design for iOS- यदि आप वेब डिज़ाइन कर रहे हैं, तो आप इसे हर प्लेटफ़ॉर्म के लिए करते हैं। क्योंकि वेब हर प्लेटफॉर्म पर है।

— समस्याएंऑफसिट

@ मुझे पता है कि वेब पर काम करना सार्वभौमिक है, लेकिन प्रत्येक ब्राउज़र और उनके अंतर्निहित रूपरेखाओं में विशिष्ट CSS विशेषताएँ हैं। तो क्रोम में सफारी और फायरफॉक्स और वाइसवेरा के लिए कुछ विशेषताएं उपलब्ध नहीं हो सकती हैं।

— eliफिल्म