昨天，我在Xcode 9.0（9A235）的iPhone X Simulator上測試了基于Cordova的應(yīng)用程序，但效果并不理想。首先，不是填充整個屏幕區(qū)域，而是在應(yīng)用內(nèi)容的上方和下方都有黑色區(qū)域。更糟糕的是，在應(yīng)用內(nèi)容和黑色之間是兩個白條。添加cordova-plugin-wkwebview-engine這樣科爾多瓦呈現(xiàn)使用WKWebView（不是一個UIWebView）修復(fù)了白條。由于性能和內(nèi)存泄漏問題，我的應(yīng)用程序無法從UIWebView遷移到WKWebView，cordova-plugin-wkwebview-engine這是在將從Inapp Purchase托管的內(nèi)容加載到HTML5畫布中加載圖像時發(fā)生的（file://由于WKWebView的安全性限制，無法通過Webview 直接訪問，因此圖像數(shù)據(jù)必須通過cordova-plugin-file）加載。這些屏幕快照顯示了一個在<body> 上設(shè)置了藍(lán)色背景的測試應(yīng)用程序。在UIWebView的上方和下方，您可以看到白色的條，但在WKWebView中則看不到：與填充整個屏幕區(qū)域的本機應(yīng)用程序相比，兩種Cordova Webview均顯示黑色區(qū)域
3 回答
寶慕林4294392
TA貢獻(xiàn)2021條經(jīng)驗 獲得超8個贊
您必須執(zhí)行3個步驟
適用于iOs 11狀態(tài)欄和iPhone X標(biāo)頭問題
1.視口蓋
添加viewport-fit=cover到視口的meta中<header>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
演示： https ：//jsfiddle.net/gq5pt509（index.html）
向config.xml內(nèi)部添加更多啟動畫面<platform name="ios">
不要跳過這一步，這需要讓屏幕適合用于iPhone X工作
<splash src="your_path/Default@2x~ipad~anyany.png" /> <!-- 2732x2732 -->
<splash src="your_path/Default@2x~ipad~comany.png" /> <!-- 1278x2732 -->
<splash src="your_path/Default@2x~iphone~anyany.png" /> <!-- 1334x1334 -->
<splash src="your_path/Default@2x~iphone~comany.png" /> <!-- 750x1334 -->
<splash src="your_path/Default@2x~iphone~comcom.png" /> <!-- 1334x750 -->
<splash src="your_path/Default@3x~iphone~anyany.png" /> <!-- 2208x2208 -->
<splash src="your_path/Default@3x~iphone~anycom.png" /> <!-- 2208x1242 -->
<splash src="your_path/Default@3x~iphone~comany.png" /> <!-- 1242x2208 -->
演示： https : //jsfiddle.net/mmy885q4（config.xml）
在CSS上修復(fù)樣式
使用safe-area-inset-left，safe-area-inset-right，safe-area-inset-top，或safe-area-inset-bottom
示例：（在您的情況下使用?。?/p>
#header {
position: fixed;
top: 1.25rem; // iOs 10 or lower
top: constant(safe-area-inset-top); // iOs 11
top: env(safe-area-inset-top); // iOs 11+ (feature)
// or use calc()
top: calc(constant(safe-area-inset-top) + 1rem);
top: env(constant(safe-area-inset-top) + 1rem);
// or SCSS calc()
$nav-height: 1.25rem;
top: calc(constant(safe-area-inset-top) + #{$nav-height});
top: calc(env(safe-area-inset-top) + #{$nav-height});
}
獎勵：您可以像在設(shè)備上is-android或is-ios在設(shè)備上添加身體類別
var platformId = window.cordova.platformId;
if (platformId) {
document.body.classList.add('is-' + platformId);
}
因此，您可以在CSS上執(zhí)行類似的操作
.is-ios #header {
// Properties
}
- 3 回答
- 0 關(guān)注
- 781 瀏覽
添加回答
舉報
0/150
提交
取消