पृष्ठभूमि

Apple के iPhone से कई ऐप्स अंदर वेबव्यू की शैली के साथ सीधे संगत हैं। जब स्क्रीन पोर्ट्रेट मोड में होती है, तो शीर्ष पर अक्सर एक नेविगेशन बार होता है, जो वेबव्यू में सामग्री को कवर नहीं करता है। निचली ऊंचाई को ऐप स्तर से सेट किया गया है ताकि वेबव्यू का निचला भाग काली क्षैतिज पट्टी क्षेत्र के भीतर न हो, ताकि यह वेबव्यू में सामग्री के प्रदर्शन में बाधा न बने।

हालाँकि, प्रत्येक ऐप बहुत अलग है, और अंदर का वेबव्यू अलग तरह से प्रदर्शित होगा। यदि ऐप की निचली ऊंचाई नहीं है, तो वेबव्यू में नीचे की सामग्री को एक छोटी काली पट्टी द्वारा अवरुद्ध कर दिया जाएगा। वेब पेज शैली अनुकूलता के संदर्भ में, इसे पिछले मॉडलों की शैली को प्रभावित किए बिना अद्वितीय "बैंग्स" और iPhoneX के निचले भाग में छोटी काली क्षैतिज पट्टी शैली के साथ संगत होने की आवश्यकता है।

सुरक्षित क्षेत्र

सबसे पहले iPhoneX के सुरक्षित क्षेत्र को समझें। नीचे चित्र में नीला भाग सुरक्षित क्षेत्र है। दोनों तरफ मार्जिन, शीर्ष पर पायदान और नीचे छोटी काली पट्टी क्षेत्र सभी असुरक्षित क्षेत्र हैं, और ऐसे क्षेत्र हैं जहां सामग्री को अवरुद्ध किया जा सकता है। फिर हमें अपनी सामग्री को सुरक्षित क्षेत्र के भीतर नियंत्रित करने की आवश्यकता है।

संगत समाधान

सौभाग्य से, जब iPhoneX सामने आया, तो आधिकारिक ios11 सिस्टम ने इस शैली अंतर के साथ संगत होने के लिए WebKit Api भी प्रदान किया।

चरण एक: व्यूपोर्ट-फ़िट विशेषता सेट करें

viewport-fit में तीन विशेषता मान हैं: ऑटो, सम्‍मिलित और फ़िट। डिफ़ॉल्ट ऑटो है.
इसमें शामिल है: विज़ुअल विंडो में पूरी तरह से वेब पेज सामग्री शामिल है, और पेज सामग्री सुरक्षित क्षेत्र में प्रदर्शित होती है
कवर: वेब पेज सामग्री पूरी तरह से विज़ुअल विंडो को कवर करती है, और पेज सामग्री स्क्रीन को भर देती है
ऑटो: डिफ़ॉल्ट मान, include
के अनुरूप
डिफ़ॉल्ट रूप से, Safari व्यूपोर्ट-फिट=कंटेन स्थिति प्रदर्शित करता है, जैसा कि नीचे दिखाया गया है। लैंडस्केप मोड में, वेबव्यू में पृष्ठ सामग्री सुरक्षित क्षेत्र में होती है। हालाँकि, स्टाइल के नजरिए से, यह बहुत सुंदर नहीं है और iPhoneX द्वारा दिए गए फुल-स्क्रीन फीचर का अच्छा उपयोग नहीं करता है।

इस समस्या को हल करने के लिए, ios11 में WebKit में एक नया CSS फ़ंक्शन env(), और चार पूर्वनिर्धारित पर्यावरण चर शामिल हैं safe-area-inset-left, सुरक्षित-क्षेत्र-इनसेट-दाएं, सुरक्षित-क्षेत्र-इनसेट-टॉप और सुरक्षित-क्षेत्र-इनसेट-बॉटम। ये चार पर्यावरण चर सुरक्षित क्षेत्र से दूरी का प्रतिनिधित्व करते हैं।

  • सुरक्षित-क्षेत्र-इनसेट-बाएँ: सुरक्षित क्षेत्र और बाईं सीमा के बीच की दूरी
    • है
  • सुरक्षित-क्षेत्र-इनसेट-दाएं: सुरक्षित क्षेत्र और दाहिनी सीमा के बीच की दूरी
  • सुरक्षित-क्षेत्र-इनसेट-टॉप: सुरक्षित क्षेत्र और शीर्ष सीमा के बीच की दूरी
  • सुरक्षित-क्षेत्र-इनसेट-बॉटम: सुरक्षित क्षेत्र और निचली सीमा के बीच की दूरी

ios11.2 स्थिरांक() फ़ंक्शन का उपयोग करता था, लेकिन बाद में इसे ios11.2 संस्करण में env() फ़ंक्शन में बदल दिया गया था। दोनों के अनुकूल होने के लिए आप दोनों लिख सकते हैं।

चरण 2: सुरक्षित क्षेत्र की दूरी निर्धारित करें

.पोस्ट {
    पैडिंग: 12px;
    पैडिंग-बाएँ: स्थिरांक (सुरक्षित-क्षेत्र-इनसेट-बाएँ); //आईओएस<11.2
    पैडिंग-बाएँ: env(सुरक्षित-क्षेत्र-इनसेट-बाएँ); //आईओएस>=11.2
}

इस तरह, जब यह सुरक्षित क्षेत्र में नहीं होता है, तो env(safe-area-inset-left) 0 के बराबर नहीं होता है, जिससे पैडिंग-लेफ्ट पर एक सुरक्षित दूरी निर्धारित की जाएगी ताकि सामग्री अवरुद्ध न हो।

उपरोक्त "बैंग्स" द्वारा अवरुद्ध है। वास्तव में, ज्यादातर मामलों में, नीचे की छोटी काली पट्टी फ्लोटिंग बार को अवरुद्ध कर देती है। विशेषता समर्थन निर्णय @supports के साथ, केवल env(safe-area-inset-bottom) तब निष्पादित किया जाएगा जब यह ब्राउज़र द्वारा समर्थित होगा। 

.बॉटम-बार{
  चौड़ाई: 100%;
  स्थिति: निश्चित;
  निचला: 0;
  पृष्ठभूमि: नीला;
}
@समर्थन (पैडिंग-बॉटम: env(सुरक्षित-एरिया-इनसेट-बॉटम)) {
    .बॉटम-बार {
      पैडिंग-बॉटम: स्थिरांक(सुरक्षित-क्षेत्र-इनसेट-बॉटम);
      पैडिंग-बॉटम: env(सुरक्षित-एरिया-इनसेट-बॉटम);
    }
  }

नोट: WeChat में वेबव्यू डिफ़ॉल्ट व्यूपोर्ट-फिट=कवर स्थिति में है। आपको केवल सुरक्षित दूरी तय करने की जरूरत है। उपरोक्त समाधान WeChat एप्लेट पर भी लागू है।