猿问

Cordova应用程序无法在iPhone X（模拟器）上正确显示

昨天，我在Xcode 9.0（9A235）的iPhone X Simulator上测试了基于Cordova的应用程序，但效果并不理想。首先，不是填充整个屏幕区域，而是在应用内容的上方和下方都有黑色区域。更糟糕的是，在应用内容和黑色之间是两个白条。


添加cordova-plugin-wkwebview-engine这样科尔多瓦呈现使用WKWebView（不是一个UIWebView）修复了白条。由于性能和内存泄漏问题，我的应用程序无法从UIWebView迁移到WKWebView，cordova-plugin-wkwebview-engine这是在将从Inapp Purchase托管的内容加载到HTML5画布中加载图像时发生的（file://由于WKWebView的安全性限制，无法通过Webview 直接访问，因此图像数据必须通过cordova-plugin-file）加载。


这些屏幕快照显示了一个在<body> 上设置了蓝色背景的测试应用程序。在UIWebView的上方和下方，您可以看到白色的条，但在WKWebView中则看不到：

与填充整个屏幕区域的本机应用程序相比，两种Cordova Webview均显示黑色区域


蝴蝶不菲
浏览 748回答 3
3回答

宝慕林4294392

您必须执行3个步骤适用于iOs 11状态栏和iPhone X标头问题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内部添加更多启动画面<platform name="ios">不要跳过这一步，这需要让屏幕适合用于iPhone X工作<splash src="your_path/Default@2x~ipad~anyany.png" />&nbsp; &nbsp;<!-- 2732x2732 --><splash src="your_path/Default@2x~ipad~comany.png" />&nbsp; &nbsp;<!-- 1278x2732 --><splash src="your_path/Default@2x~iphone~anyany.png" /> <!-- 1334x1334 --><splash src="your_path/Default@2x~iphone~comany.png" /> <!-- 750x1334&nbsp; --><splash src="your_path/Default@2x~iphone~comcom.png" /> <!-- 1334x750&nbsp; --><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上修复样式使用safe-area-inset-left，safe-area-inset-right，safe-area-inset-top，或safe-area-inset-bottom示例：（在您的情况下使用！）#header {&nbsp; &nbsp;position: fixed;&nbsp; &nbsp;top: 1.25rem; // iOs 10 or lower&nbsp; &nbsp;top: constant(safe-area-inset-top); // iOs 11&nbsp; &nbsp;top: env(safe-area-inset-top); // iOs 11+ (feature)&nbsp; &nbsp;// or use calc()&nbsp; &nbsp;top: calc(constant(safe-area-inset-top) + 1rem);&nbsp; &nbsp;top: env(constant(safe-area-inset-top) + 1rem);&nbsp; &nbsp;// or SCSS calc()&nbsp; &nbsp;$nav-height: 1.25rem;&nbsp; &nbsp;top: calc(constant(safe-area-inset-top) + #{$nav-height});&nbsp; &nbsp;top: calc(env(safe-area-inset-top) + #{$nav-height});}奖励：您可以像在设备上is-android或is-ios在设备上添加身体类别var platformId = window.cordova.platformId;if (platformId) {&nbsp; &nbsp;document.body.classList.add('is-' + platformId);}因此，您可以在CSS上执行类似的操作.is-ios #header {&nbsp;// Properties}
0
随时随地看视频慕课网APP

相关分类

iOS
我要回答