Cordova应用程序无法在iPhone X(模拟器)上正确显示
Dav*_*den 113 ios cordova phonegap iphone-x
我昨天在Xcode 9.0(9A235)的iPhone X模拟器上测试了我的基于Cordova的应用程序,它看起来不太好.首先,不是填满整个屏幕区域,而是在app内容的上方和下方有一个黑色区域.更糟糕的是,应用内容和黑色之间是两个白条.
cordova-plugin-wkwebview-engine使用WKWebView(不是UIWebView)添加所以Cordova渲染可以修复白条.我的应用程序没有从UIWebView迁移到WKWebView,因为在使用cordova-plugin-wkwebview-engine从Inapp购买托管内容下载的图像到HTML5画布时出现性能和内存泄漏问题(file://由于WKWebView中的安全限制,Webview无法直接访问)必须通过加载图像数据cordova-plugin-file.
这些屏幕截图显示了一个在<body> 上设置了蓝色背景的测试应用.在UIWebView的上方和下方,您可以看到白条,但不能看到WKWebView:
与充满整个屏幕区域的原生应用相比,Cordova Webviews都展示了黑色区域:
Dav*_*den 225
我在这里找到了白条的解决方案:
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以取代传统的发射图像,使用科尔多瓦默认.为此,请将以下内容添加到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还有另一个不同之处:由于"缺口",状态栏大于20px,这意味着Cordova应用程序远端顶部的任何内容都会被它遮挡:
您可以使用safe-area-inset-*iOS 11中的新常量在CSS中自动处理填充,而不是像素一样对填充进行硬编码.
注意:在iOS 11.0中调用了处理这些常量的函数,constant()但是在iOS 11.2中Apple将其重命名为env()(参见此处),因此要涵盖两种情况,您需要使用两者重载CSS规则并依赖CSS回退机制来应用适当的一个:
body{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
然后根据需要得到结果:应用内容覆盖整个屏幕,但不会被"缺口"模糊:
我已经创建了一个Cordova测试项目,它说明了上述步骤: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显示不正确 - Mike Hartington已创建此拉取请求,该请求将应用必要的更改.
- 这已合并到
cordova-plugin-statusbar@2.3.0发行版中,因此请确保您至少使用此版本应用于安全区域插入
闪屏
- 在iOS 11/iPhone X上,LaunchScreen故事板约束发生了变化,这意味着当使用现有版本的插件时,启动画面似乎在启动时"跳跃"(参见此处).
- 这是在错误报告CB-13505中修复的,已修复PR cordova-ios#354并已发布
cordova-ios@4.5.4,因此请确保您使用的是最新版本的cordova-ios平台.
设备方向
- 在iOS 11.0上使用UIWebView时,从纵向>横向>纵向旋转会导致
safe-area-inset不重新应用,导致内容再次被凹陷遮挡(在下面的注释中由jms突出显示). - 如果应用程序在横向上启动然后旋转为纵向,也会发生
- 使用WKWebView时不会发生这种情况
cordova-plugin-wkwebview-engine. - 雷达报告:http://www.openradar.me/radar？id = 5035192880201728
- 更新:这似乎已在iOS 11.1中修复
作为参考,这是我打开的原始Cordova问题,它捕获了这个:https://issues.apache.org/jira/browse/CB-13273
- 旋转屏幕时有任何问题吗？我一直在尝试,但在旋转屏幕后,一切都坏了(安全区域插入 - *不会根据设备方向更新其值;并且在再次旋转肖像 - >横向 - >纵向后,初始值也会被破坏).这可能是apple/safari浏览器的一些问题吗？ (3认同)
- 是否有关于旋转问题的更新？我在iOS 12上遇到了同样的问题.我觉得这个问题仍然存在./ cc @jms (2认同)
cod*_*der 34
用于手动修复现有的cordova项目
黑条
将其添加到info.plist文件中.修复启动映像是一个单独的问题,即如何添加iPhoneX启动映像
<key>UILaunchStoryboardName</key>
<string>CDVLaunchScreen</string>
白条
在元标记中设置viewport-fit = cover
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
l2a*_*lba 13
你需要做3个步骤
对于iOs 11状态栏和iPhone X标头问题
1.视口合适的封面
添加viewport-fit=cover到视口的元数据中<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上deviceready
var platformId = window.cordova.platformId;
if (platformId) {
document.body.classList.add('is-' + platformId);
}
所以你可以在CSS上做这样的事情
.is-ios #header {
// Properties
}
在我的情况下，每个启动画面都是单独设计的，而不是自动生成或以故事板格式布局，我不得不坚持我的旧启动屏幕配置，并将纵向和横向图像添加到 config.xml 中以 iPhoneX 1125×2436 方向为目标像这样：
<splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
<splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />
将这些添加到 config.xml（“viewport-fit=cover”已在 index.hml 中设置）后，我使用 Ionic Pro 构建的应用程序填充了 iPhoneX 设备上的整个屏幕。
| 归档时间： |
|
| 查看次数： |
79343 次 |
| 最近记录： |