मुझे यहाँ सफ़ेद पट्टियों का हल मिला :
viewport-fit=cover
व्यूपोर्ट <meta>
टैग पर सेट करें , अर्थात:
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
UIWebView में सफेद पट्टियाँ गायब हो जाती हैं:
(द्वारा प्रदान की काली क्षेत्रों को दूर करने के समाधान @dpogue नीचे एक टिप्पणी में) का उपयोग करने के लिए है LaunchStoryboard छवियों के साथ cordova-plugin-splashscreen
विरासत लांच छवियों, डिफ़ॉल्ट रूप से Cordova द्वारा इस्तेमाल किया बदलने के लिए। ऐसा करने के लिए, निम्नलिखित iOS प्लेटफ़ॉर्म को निम्न में जोड़ें config.xml
:
<platform name="ios">
<splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
<splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
<splash src="res/screen/ios/Default@3x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
<splash src="res/screen/ios/Default@2x~ipad~comany.png" />
<!-- more iOS config... -->
</platform>
फिर निम्न आयामों के साथ चित्र बनाएं res/screen/ios
(किसी भी मौजूदा को हटा दें):
Default@2x~iphone~anyany.png - 1334x1334
Default@2x~iphone~comany.png - 750x1334
Default@2x~iphone~comcom.png - 1334x750
Default@3x~iphone~anyany.png - 2208x2208
Default@3x~iphone~anycom.png - 2208x1242
Default@3x~iphone~comany.png - 1242x2208
Default@2x~ipad~anyany.png - 2732x2732
Default@2x~ipad~comany.png - 1278x2732
एक बार काली पट्टियाँ हटा दिए जाने के बाद, iPhone X के बारे में पता करने के लिए एक और बात अलग होती है: स्टेटस बार "notch" के कारण 20px से बड़ा होता है, जिसका अर्थ है कि आपके कॉर्डोवा ऐप के सबसे ऊपर स्थित कोई भी सामग्री इससे अस्पष्ट हो जाएगी :
पिक्सेल में हार्ड-कोडिंग के बजाय, आप safe-area-inset-*
iOS 11 में नए स्थिरांक का उपयोग करके सीएसएस में इसे स्वचालित रूप से संभाल सकते हैं ।
नोट: iOS 11.0 में इन स्थिरांक को संभालने के लिए कार्य को बुलाया गया था, constant()
लेकिन iOS 11.2 में Apple ने इसका नाम बदलकर env()
( यहां देखें ), इसलिए दोनों मामलों को कवर करने के लिए आपको सीएसएस नियम को दोनों के साथ अधिभारित करने और सीएसएस फॉलबैक तंत्र पर भरोसा करने की आवश्यकता है। उपयुक्त एक:
body{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
परिणाम तब वांछित है: एप्लिकेशन सामग्री पूर्ण स्क्रीन को कवर करती है, लेकिन "notch" द्वारा अस्पष्ट नहीं है:
मैंने एक कॉर्डोवा परीक्षण परियोजना बनाई है जो उपरोक्त चरणों को दर्शाती है : webview-test.zip
टिप्पणियाँ:
पाद बटन
- यदि आपके ऐप में पाद बटन हैं (जैसा कि मेरा है), तो आपको
safe-area-inset-bottom
iPhone X पर वर्चुअल होम बटन द्वारा ओवरलैप होने से बचने के लिए भी आवेदन करना होगा।
- मेरे मामले में, मैं इसे लागू नहीं कर सकता
<body>
क्योंकि पाद पूरी तरह से स्थित है, इसलिए मुझे इसे सीधे पाद लेख पर लागू करने की आवश्यकता है:
.toolbar-footer{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
कॉर्डोबा-प्लगइन-प्रस्थिति
- IPhone X पर स्टेटस बार का आकार बदल गया है, इसलिए iPhone X पर पुराने संस्करण
cordova-plugin-statusbar
गलत तरीके से प्रदर्शित होते हैं
- माइक हार्टिंगटन ने यह पुल अनुरोध बनाया है जो आवश्यक परिवर्तनों को लागू करता है।
- यह
cordova-plugin-statusbar@2.3.0
रिलीज़ में विलय कर दिया गया था , इसलिए सुनिश्चित करें कि आप सुरक्षित-क्षेत्र-इनसेट पर लागू करने के लिए कम से कम इस संस्करण का उपयोग कर रहे हैं
स्प्लैश स्क्रीन
- IOS 11 / iPhone X पर लॉन्चस्क्रीन स्टोरीबोर्ड बाधाएं बदल गईं, जिसका अर्थ है कि प्लगइन के मौजूदा संस्करणों का उपयोग करते समय स्पलैशस्क्रीन लॉन्च पर "कूद" दिखाई दिया ( यहां देखें )।
- यह बग रिपोर्ट CB-13505 , निर्धारित PR कॉर्डोवा-आईओएस # 354 में कैप्चर किया गया और इसमें जारी किया गया
cordova-ios@4.5.4
, इसलिए सुनिश्चित करें कि आप cordova-ios
प्लेटफॉर्म के हाल के संस्करण का उपयोग कर रहे हैं ।
डिवाइस ओरिएंटेशन
- IOS 11.0 पर UIWebView का उपयोग करते समय, पोर्ट्रेट> लैंडस्केप> पोर्ट्रेट से घूमते हुए,
safe-area-inset
फिर से लागू नहीं होने का कारण बनता है, जिससे सामग्री को फिर से notch द्वारा अस्पष्ट किया जाता है (जैसा कि नीचे टिप्पणी में jms द्वारा हाइलाइट किया गया है)।
- यह भी होता है कि अगर ऐप को लैंडस्केप में लॉन्च किया जाता है तो पोर्ट्रेट को घुमाया जाता है
- WKWebView का उपयोग करते समय ऐसा नहीं होता है
cordova-plugin-wkwebview-engine
।
- रडार रिपोर्ट: http://www.openradar.me/radar?id=5035192880201728
- अपडेट : ऐसा प्रतीत होता है कि iOS 11.1 में तय किया गया है
संदर्भ के लिए, यह मूल कॉर्डोवा मुद्दा है जिसे मैंने खोला है जो इसे कैप्चर करता है: https://issues.apache.org/jira/browse/CB-13273