IPhone / iPod टच के लिए Safari iOS 7 में नेविगेशन बार छुपाना असंभव

Question

मुझे विश्वास नहीं है कि जावास्क्रिप्ट / सीएसएस / html का उपयोग करके प्रोग्राम को बार छिपाने के लिए कोई समाधान है, लेकिन मुझे एक समस्या का वर्णन करने का प्रयास करने दें। हम मोबाइल गेम डेवलपर्स की टीम हैं और हम एक साल के लिए गेम विकसित कर रहे हैं।

IOS 7 घोषणा के बाद हमने समस्या का सामना किया है कि यह नेविगेशन बार को छिपाने के लिए IMPOSSIBLE है। एक बार जब उपयोगकर्ता सफारी ब्राउज़र के ऊपरी या निचले हिस्से में टैप करता है, तो नेविगेशन बार फिर से दिखाई देते हैं और गेम के सभी नियंत्रणों को छिपाते हैं।

एकमात्र समाधान जो हमने अभी तक पाया है वह उपयोगकर्ता को इसके लिए मजबूर कर रहा है:

1. डिवाइस घुमाएँ
2. पेज स्क्रॉल करें
3. होम-स्क्रीन पर एप्लिकेशन जोड़ें

इनमें से कोई भी विकल्प स्वीकार्य नहीं है। ऐसा लग रहा है कि Apple इस समस्या से अवगत है, लेकिन इसे अनदेखा करता रहता है। उन्होंने बग # 14076889 बग के डुप्लिकेट के रूप में एक रिपोर्ट बग को बंद कर दिया है।

मेरा मानना ​​है कि हम एकमात्र टीम नहीं हैं जो समान समस्या का अनुभव करते हैं। क्या किसी को इसका हल पता है?

Answer 1

अद्यतन सितंबर 2014: iOS 8 ने minimal-uiसुविधा को हटा दिया है फिर से डिफ़ॉल्ट ब्राउज़र व्यवहार पर भरोसा करने के अलावा नेविगेशन बार को हटाने / छिपाने का कोई तरीका नहीं है (स्क्रॉल करते समय बार छिपाए जाएंगे, लेकिन केवल अगर स्क्रॉलिंग तत्व BODYपृष्ठ का है)। केवल "वर्कअराउंड" ऐप को होमस्क्रीन पर सहेजना है और उचित मेटा टैग सेट करना है (नीचे देखें)।

अगस्त 2014 को अपडेट करें: iOS 8 (बीटा) अब समर्थन नहीं करता हैminimal-ui । कोई वर्कअराउंड नहीं है। (इसका कारण उन वेबसाइटों द्वारा दुर्व्यवहार के कारण होने की संभावना है, जो इसका उपयोग लोगों को दूर नेविगेट करने से रोकने की कोशिश करते हैं, यद्यपि आईओएस 8 सफारी में नई विशेषताएं हो सकती हैं जिन्हें अभी तक सार्वजनिक नहीं किया गया है जो प्रतिस्थापित करते हैं minimal-ui।)

iOS 7.1 ने इस समस्या को हल करने के लिए एक नया एपीआई जोड़ा:

<meta name="viewport" content="minimal-ui">

यह नया व्यूपोर्ट फ्लैग डिफ़ॉल्ट रूप से सफारी यूआई को छुपाता है (केवल URL और एसएसएल संकेतक के साथ एक छोटा शीर्षक बार दिखाया गया है)। सफारी यूआई तक पहुंचने के लिए, उपयोगकर्ताओं को सक्रिय रूप से इस शीर्षक बार को टैप करना होगा।

ध्यान दें कि iOS 7.0.x पर, इसके लिए कोई API या ज्ञात वर्कअराउंड नहीं है । उन संस्करणों में, यदि आप सफ़ारी के ब्राउज़र क्रोम को स्थायी रूप से छिपाना चाहते हैं, तो आपको उपयोगकर्ता को वेब ऐप को होम स्क्रीन पर जोड़ने के लिए (उपयुक्त मेटा टैग सेट के साथ <meta name="apple-mobile-web-app-capable" content="yes">) प्राप्त करने की आवश्यकता है या फोनगैप जैसे कुछ मूल एप्लिकेशन आवरण का उपयोग करें और वितरित करें ऐप स्टोर।

व्यक्तिगत रूप से, मैं चाहता हूं कि उन्होंने iOS 6 मोबाइल सफारी पर लैंडस्केप मोड में पेश किए गए "फुल स्क्रीन" बटन को नहीं हटाया था, जो एक शानदार समाधान था जिसने डेवलपर्स और उपयोगकर्ताओं को खुश किया।

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

Comments

क्या इस स्ट्रिंग ("न्यूनतम-यूआई") को सर्वर से प्राप्त होने पर HTML पृष्ठ का हिस्सा होना चाहिए या फ़्लाई पर व्यूपोर्ट को संशोधित करना और जावास्क्रिप्ट द्वारा उस स्ट्रिंग को जोड़ना / हटाना संभव है?

— पेट्र अर्बन

ध्यान दें कि iOS 8 beta4 के लिए समर्थन हटा दिया गया है minimal-ui, developer.apple.com/library/prerelease/ios/releasenotes/General/... , यह संभव है वहाँ भविष्य में मोबाइल सफारी डिफ़ॉल्ट व्यवहार को नियंत्रित करने के कोई रास्ता नहीं होगा। stackoverflow.com/questions/24889100/…

— बिटिन

वास्तव में मुझे जो जानकारी चाहिए थी। जब भी वे न्यूनतम-यूआई को बढ़ाते हैं, तो वे उम्मीद करते हैं कि वे फुलस्क्रीन एपीआई का समर्थन करेंगे।

— पाबू

IOS9 के लिए आप न्यूनतम-यूआई अनुकरण का उपयोग कर सकते हैं। उदाहरण के लिए: stackoverflow.com/a/26884561/2764408

— DrMoriarty

IOS10 के बारे में क्या? जो भी हो एक व्यावहारिक समाधान खोजने के लिए प्रतीत नहीं कर सकते।

— ओलिवर टापिन

Answer 2

अद्यतन : रिलीज नोट्स पर इस मंच पोस्ट के अनुसार iOS7.1 बीटा में वर्तमान में इसे ठीक करने के लिए एक मेटा गुण है ।

<meta name="viewport" content="minimal-ui">

मैंने एक परीक्षण चलाया है और यह पुष्टि कर सकता है कि यह सुविधा अभी बीटा 2 में है।

Answer 3

नोट : नया न्यूनतम-यूआई विकल्प एक महान समाधान है लेकिन इसे HTML प्रतिक्रिया का हिस्सा बनने की आवश्यकता है। मैंने JS7 के साथ व्यूपोर्ट मेटा टैग को जोड़ने के लिए iOS7.1 Beta3 पर कोशिश की

$('head').append('<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui">');

"न्यूनतम-यूआई" मूल्य को ब्राउज़र द्वारा अनदेखा किया जाता है।

Comments

आप सच करने के लिए यह निर्धारित करने की आवश्यकता: <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = उपकरण-चौड़ाई, उपयोगकर्ता-मापनीय = 0, कम से कम-ui = 1">: कम से कम-ui = 1 तो यह बजाय का उपयोग

— shanebo

@ शेन्बो यह सच नहीं है। <meta name="viewport" content="width=device-width, minimal-ui">iPhone 5 पर ठीक काम करता है और साथ ही IOS सिम्युलेटर पर परीक्षण करता है।

— coredumperror

एक बार सेट करने के बाद, आप इसे jQuery का उपयोग करके कैसे निकाल सकते हैं?

— tq

क्या आप jQuery के साथ पूरे व्यूपोर्ट या न्यूनतम-यूआई को हटाना चाहते हैं?

— मेक्सिको

Answer 4

अपडेट: iOS7.1 अब जारी कर दिया गया है इसलिए NDA ने उठा लिया है।

<meta name="viewport" content="minimal-ui">

वास्तव में सही टैग है और लाइव रिलीज में काम करता है। याद रखें कि "व्यूपोर्ट" यदि आवश्यक हो तो अल्पविराम से अलग की गई सूची का समर्थन कर सकता है।

वेबसाइट को ऐप की तरह महसूस करने के लिए मैं इसे अन्य मोबाइल वेरिएबल्स के साथ मिलाता हूं:

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui">

-

हम इससे भी जूझ रहे हैं। हमारी साइट पर हमारे पास एक TabBar है और हर बार जब आप टैब सफारी पर क्लिक करने का प्रयास करते हैं तो पॉप अप नियंत्रित होता है।

आज उम्मीद है। यदि आप ऐप्पल डेवलपर प्रोग्राम के सदस्य हैं, तो मैं दृढ़ता से इस मंच पर जाने का सुझाव दूंगा: https://devforums.apple.com/message/927476

डब्ल्यू

Comments

आधिकारिक उत्तर पोस्ट न करने के लिए क्षमा याचना। Apple के रिलीज़ नोट अभी भी NDA के अंतर्गत हैं। लेकिन याद रखें कि होने वाले परिवर्तनों के लिए आपको iOS का सही संस्करण चलाने की आवश्यकता है।

— विलियम जॉर्ज

Answer 5

संपादित करें 2:

IOS 7.1 के बाद से काम नहीं करता है

संपादित करें:

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

www.paf.com/mobile/launch/flowers.html (क्षमा करें, 2 से अधिक लिंक पोस्ट नहीं कर सकता)

हाल ही में मैंने एक हैक पर भी ठोकर खाई है जो नेविगेशन बार को निष्क्रिय करने के लिए ट्रिगर करता है। शीर्ष क्षेत्र। आपको बस निम्नलिखित शैलियों के साथ अपने DOM में एक यादृच्छिक तत्व जोड़ना है:

z-index: 100000; /* should be bigger than everything else */
position: fixed;
overflow: scroll;
-webkit-overflow-scrolling: touch;

इसके बारे में यहाँ और पढ़ें ।

Answer 6

यदि आप एक वेब-ऐप बना रहे हैं, तो आप होम स्क्रीन से यूआरएल का लिंक बना सकते हैं; और निम्न HTML मेटा टैग का उपयोग करें:

<!-- Allows fullscreen mode from the Homescreen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Sets the color of the text/battery, wireless icons etc -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

यह आपके हेडर / नेवी बार पर संकेतक को सुपर-इंपोज करेगा। (संकेतक जो आप सभी iPad स्क्रीन पर देखते हैं।

अधिक जानकारी के लिए, देखें: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Answer 7

उम्मीद है कि यह किसी की मदद करता है, लेकिन मैं अपने व्यूपोर्ट की चौड़ाई = डिवाइस-चौड़ाई को सेट नहीं करना चाहता था .. क्योंकि iPhone 4 पर इसकी 480 पीएक्स .. और मैं चाहता हूं कि मेरा गेम सभी उपकरणों के लिए 800px पर हो।

और अगर आप इसे सेट नहीं करते हैं, तो न्यूनतम-यूआई पंजीकरण नहीं करता है।

मेरा काम आसपास है:

<meta name="viewport" content="width=device-width, minimal-ui">

और पेज लोड होने के बाद व्यूपोर्ट बदलना:

  $(window).load(function(){
    $('meta[name=viewport]').attr('content','width=800, maximum-scale=1')
  });

मैं बहुत हैरान हूँ यह काम करता है। पता बार और निचले UI बटन केवल तभी दिखाई देते हैं जब उपयोगकर्ता स्क्रीन के ऊपर / नीचे क्लिक करता है। अब इसे प्यार करो।

Comments

यदि आप सिर्फ <मेटा नाम = "व्यूपोर्ट" सामग्री = "न्यूनतम-यूआई" का उपयोग करते हैं, तो यह अच्छी तरह से काम कर रहा है

— एरडल जी।

Answer 8

इस समाधान ने मेरे लिए काम किया, लेकिन मेरे मामले में, वेबप एक निजी जनता के लिए था, जहां मुझे उस आईपैड का नियंत्रण था जिसका उपयोग किया जाएगा।

मैंने सभी संभावित मेटा टैग और हैक का उपयोग करने की कोशिश की, और वास्तव में, IOS8 के बाद न्यूनतम-यूआई सुविधा को हटा दिया गया, हल करने के लिए व्यावहारिक रूप से असंभव था।

बॉक्स के बाहर सोचते हुए, हमारी टीम एक अच्छे समाधान पर पहुंच गई:

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

लेकिन मैं दोहराता हूं: यदि आप सामान्य रूप से जनता के लिए एक वेब साइट विकसित कर रहे हैं तो इसका उपयोग न करें। यह UX आपके उपयोगकर्ता को ऐप तक पहुंचने के लिए एक अलग ब्राउज़र डाउनलोड करने के लिए मजबूर करता है।

अपडेट करें

मेरा एक डेवलपर मित्र इस समाधान के साथ आया:

ऐप्पलरेटर से टाइटेनियम के अंदर एक वेबव्यू का उपयोग करें। यह Apple स्टोर पर नहीं होगा, लेकिन एक निजी कार्यक्रम के लिए, यह ठीक काम करेगा!