昨天，我在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均显示黑色区域
3 回答
宝慕林4294392
TA贡献2021条经验 获得超8个赞
您必须执行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" /> <!-- 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上修复样式
使用safe-area-inset-left，safe-area-inset-right，safe-area-inset-top，或safe-area-inset-bottom
示例：（在您的情况下使用！）
#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});
}
奖励：您可以像在设备上is-android或is-ios在设备上添加身体类别
var platformId = window.cordova.platformId;
if (platformId) {
document.body.classList.add('is-' + platformId);
}
因此，您可以在CSS上执行类似的操作
.is-ios #header {
// Properties
}
- 3 回答
- 0 关注
- 699 浏览
添加回答
举报
0/150
提交
取消