मैं एक एकल-पृष्ठ वेब ऐप पर काम कर रहा हूं, जिसका उपयोग आमतौर पर मोबाइल उपकरणों पर किया जाएगा। इसकी विशेषताओं में से एक एक मानचित्र मोड है, जो अस्थायी रूप से संपूर्ण ब्राउज़र विंडो पर ले जाता है; दूरी के पैमाने और कुछ नियंत्रण नक्शे के चार कोनों से जुड़े होते हैं। यहाँ मानचित्र का एक छोटा स्क्रीनशॉट है ताकि आप बता सकें कि मैं किस बारे में बात कर रहा हूँ:
मानचित्र को एक <div>साथ position: fixedऔर सभी चार समन्वय शून्य के रूप में कार्यान्वित किया जाता है; मैं भी अस्थायी रूप से सेट <body>करने के लिए overflow: hidden, जबकि नक्शा मूल से दूर स्क्रॉल किया जा रहा है अंतर्निहित एप्लिकेशन प्रदर्शन के मामले को संभालने के लिए दिख रहा है। यह मानचित्र बनाने के लिए पर्याप्त है कि मैं डेस्कटॉप ब्राउज़रों पर कैसे काम करूं। मोबाइल ब्राउज़रों को यह भी आवश्यक है कि मैं मेटा व्यूपोर्ट टैग कुछ इस तरह "width=device-width,user-scalable=no"से दूं कि खिड़की के दृश्य क्षेत्र को व्यूपोर्ट के साथ बिल्कुल अनुरूप बनाया जा सके।
यह सब कुछ साल पहले खूबसूरती से काम करता था जब मैंने मूल रूप से इस ऐप को लिखा था, लेकिन कहीं-कहीं लाइन आईओएस सफारी ने स्केलिंग से जुड़े किसी भी मेटा व्यूपोर्ट विकल्प का सम्मान करना बंद कर दिया - जाहिर तौर पर बहुत सी साइट टैग को गलत बता रही थीं, जिसके परिणामस्वरूप पाठ अपठित था जो छोटा था। अभी तक अप्राप्य। वर्तमान में, यदि आप इस ब्राउज़र पर मानचित्र को सक्षम करते हैं, तो आपको थोड़ा ज़ूम-इन देखने की संभावना है, जो दाईं ओर और नीचे उन बटनों को काट देता है - और आप इसके बारे में कुछ नहीं कर सकते, क्योंकि सभी टच को ब्राउज़र स्क्रॉलिंग के बजाय मैप के लिए ज़ूम / पैन जेस्चर के रूप में व्याख्या की जाती है। उन बटनों के माध्यम से पहुंच प्राप्त सुविधाओं के बिना नक्शा बहुत उपयोगी नहीं है - और शीर्ष-दाएं बटन के बिना, आप नक्शे को बंद भी नहीं कर सकते। एकमात्र तरीका पृष्ठ को फिर से लोड करना है, जिसके परिणामस्वरूप बिना सहेजे गए डेटा का नुकसान हो सकता है।
मैं निश्चित रूप से history.pushState/ का उपयोग जोड़ने जा रहा हूं onpopstateताकि मैप ओवरले एक अलग पृष्ठ की तरह व्यवहार करे। आप ब्राउज़र के बैक बटन का उपयोग करके मैप मोड से बाहर निकलने में सक्षम होंगे - लेकिन यह लापता बटन के कारण कार्यक्षमता के बाकी नुकसान को संबोधित नहीं करता है।
मैंने .requestFullscreen()मानचित्र ओवरले को लागू करने के लिए उपयोग करने पर विचार किया है , लेकिन यह हर जगह समर्थित नहीं है कि ऐप अन्यथा उपयोगी होगा। विशेष रूप से, यह जाहिरा तौर पर iPhones पर बिल्कुल भी काम नहीं करता है, और iPads पर आपको अपनी सामग्री को ओवरलेइंग करते हुए एक स्थिति बार और एक विशाल 'X' बटन मिलता है - मेरी दूरी का स्केल संभवतः किसी भी अधिक पठनीय नहीं होगा। यह शब्दार्थ नहीं है कि मैं वास्तव में क्या चाहता हूं, वैसे भी - मुझे पूर्ण विंडो की आवश्यकता है , न कि पूर्ण स्क्रीन की।
मुझे आधुनिक ब्राउज़रों पर काम करते हुए पूर्ण-विंडो डिस्प्ले कैसे मिलेगा? मैं मेटाटपोर्ट व्यूपोर्ट टैग का उपयोग करने के बारे में विषय वार्ता पर मिल सकती है, लेकिन जैसा कि मैंने उल्लेख किया है कि अब काम नहीं करता है।