科尔多瓦应用程序无法在iPhone X（模拟器）上正确显示

121

我昨天在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中则看不到：


（来源：pbrd.co）


（来源：pbrd.co）

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

ios  cordova  phonegap  iphone-x 
— 戴夫·奥尔登
source
wkwebview很有趣。在我的游戏中，我没有全角，但也偏离了中心。在uiwebview中，它保持相同的大小，但至少使其居中。
— agmcleod
我也遇到了这个问题，所以我用CSS做一些解决方法，请参阅pt.stackoverflow.com/a/263460/55076
— Igor Trindade
我也有这个问题。只是将<meta>标签添加到我的cordova index.hml文件中，下面列出的其他标签不起作用。我正在使用cordova-ios 4.5.4运行Cordova 7x-我还需要做什么吗？
— rolinger

Answers:

245

我在这里找到了解决白条的方法：

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还要解决另一件事：状态栏由于“缺口”而大于20像素，这意味着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上已更改，因此旧版本的cordova-plugin-statusbar显示器在iPhone X上显示不正确
  • 迈克·哈丁顿（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

— 戴夫·奥尔登
source
3
旋转屏幕时是否有任何问题？我一直在尝试，但是旋转屏幕后，所有内容都被破坏了（safe-area-inset- *不会根据设备方向更新其值；并且再次旋转纵向->横向->纵向后，初始值也被破坏了）。苹果/野生动物园浏览器可能有问题吗？
— Juan Miguel S.
1
就我而言，当我添加viewport-fit=cover整个应用程序时，它只会显示白屏，而没有其他显示。我正在iPhone 7 Plus上使用iOS11，Xcode9。有人遇到类似的行为吗？
— Dimitri
1
@DaveAlden-看起来在11.2 beta +中，他们已经删除constant了env关键字-参见：webkit.org/blog/7929/designing-websites-for-iphone-x
— 布伦特（Brent）
1
您将body CSS代码放在哪里？喜欢在哪个文件中？没有什么工作对我来说，我使用的离子3
— 迪米特里
2
关于轮换问题是否有任何更新？我在iOS 12上遇到同样的问题。这个问题仍然存在，令我感到奇怪。/ cc @jms
— 年
36

手动修复现有的cordova项目

黑条

将此添加到您的info.plist文件。修复启动映像是一个单独的问题，即如何添加iPhoneX启动映像

<key>UILaunchStoryboardName</key>
<string>CDVLaunchScreen</string>

白条

在meta标签中设置viewport-fit = cover

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
— 编码器
source
谢谢！.plist更改与所选答案的更改具有相同的效果，但是速度更快。
— 2Fwebd
这些任务对CSS像素的高度和宽度有什么作用？我的应用在顶部（菜单等）有一系列狭窄的div ...然后我计算剩余的像素高度，以使最后一个DIV填充屏幕的其余部分。现在，我可以看到下方的白色条覆盖了该DIV的一部分，但我也看不出来全部-意味着DIV仍未到达屏幕底部。反过来，我的应用程序从上方的白条下方开始，因此它甚至都没有尝试使用上方的空间。
— rolinger
我用过UILaunchStoryboardName，它设法去除了黑条。但是我的启动画面得到了扩展。有什么原因吗？接受的答案是不是为我工作
— Huiting
@coder谢谢-但是将UILaunchStoryboardName添加到plist中使我无法提交到应用商店：错误ITMS-90705：“找不到启动情节提要。请确保您为启动UltaunchStoryboardName指定启动情节提要文件名而没有文件扩展名在Info.plist中。”
— 马特·罗伯茨
@Huiting您是否找到有关您案件的任何解决方案？
— LMaker
16

您必须执行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）

  1. 向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）

  1. 在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
}
— l2aelba
source
5

在每个启动屏幕都是单独设计而不是自动生成或以故事板格式进行布局的情况下，我不得不坚持旧版启动屏幕配置，并将纵向和横向图像添加到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中之后（在index.hml中已经设置了“ viewport-fit = cover”），我使用Ionic Pro构建的应用程序将填充iPhoneX设备上的整个屏幕。

— 跆拳道
source
先生，但是在我的config.xml文件中，我已经在此行上方添加了viewport-fit = cover
— Kapil soni，
@Kapilsoni，则可能是Cordova UIWebView，WKWebView，SplashScreen插件或这些配置的组合有问题。另外，您是否在构建中定位XCode 10或11？
— TaeKwonJ​​oe
先生，我的目标是XCode 10？
— 卡皮尔·索尼
2

修复了iPhone X / XS屏幕旋转问题

在iPhone X / XS上，屏幕旋转会导致标题栏高度使用不正确的值，因为safe-area-inset- *的计算没有及时反映UI刷新的新值。即使在最新的iOS 12中，此错误也存在于UIWebView中。一种解决方法是插入一个1px的上边距，然后快速将其反转，这将触发安全区域插入*立即被重新计算。修复起来有些丑陋，但是如果您出于某种原因而不得不使用UIWebView，它就可以工作。

window.addEventListener("orientationchange", function() {
    var originalMarginTop = document.body.style.marginTop;
    document.body.style.marginTop = "1px";
    setTimeout(function () {
        document.body.style.marginTop = originalMarginTop;
    }, 100);
}, false);
展开摘要

该代码的目的是使document.body.style.marginTop稍作更改，然后将其反转。不一定必须是“ 1px”。您可以选择一个不会导致UI闪烁但可以实现其目的的值。

— YL
source
UIWebView在iOS8中已被废弃...我怀疑是否会修复任何现有的错误。苹果在上载应用程序时警告说，这将很快停止使用...因此，该花点时间并迁移到WKWebView ...了
— Mozfet
2

我正在开发Cordova应用程序2年，花了数周的时间解决相关问题（例如：键盘打开时Webview滚动）。这是适用于ios和android的经过验证的解决方案

PS：我正在使用iScroll滚动内容

  1. 切勿在index.html的meta标签上使用viewport-fit = cover，将应用置于状态栏中。iOS将为所有iPhone变体处理适当的区域。
  2. 在XCode中，取消选中“ 隐藏状态栏”并要求全屏显示，并且不要忘记选择“启动屏幕文件”为 CDVLaunchScreen。
  3. 在config.xml中将全屏设置为false
  4. 最后，（感谢Eddy Verbruggen的出色插件）添加了他的插件cordova-plugin-webviewcolor来设置状态栏和底部区域的背景色。该插件将允许您设置所需的任何颜色。

  5. 将以下内容添加到config.xml（x不透明后的第一个ff）

    <preference name="BackgroundColor" value="0xff088c90" />

  6. 通过将焦点事件添加到输入元素来自己处理滚动位置

    iscrollObj.scrollToElement(elm, transitionduration ... etc)

对于android，请执行相同的操作，但要代替cordova-plugin-webviewcolor，请安装cordova-plugin-statusbar和cordova-plugin-navigationbar-color

这是使用这些插件在ios和android上均可使用的javascript代码：

function setStatusColor(colorCode) {
    //colorCode is smtg like '#427309';
    if (cordova.platformId == 'android') {
        StatusBar.backgroundColorByHexString(colorCode);
        NavigationBar.backgroundColorByHexString(colorCode);
    } else if (cordova.platformId == 'ios') {
        window.plugins.webviewcolor.change(colorCode);
    }
}
— 加尔坎
source
1

如果您在ionic全球范围内安装较新的版本，则可以运行 ionic cordova resources，它将为您生成所有初始屏幕图像以及正确的大小。

— 雾状
source
-1

请注意，本文：https : //medium.com/the-web-tub/supporting-iphone-x-for-mobile-web-cordova-app-using-onsen-ui-f17a4c272fcd具有与上述和cordova不同的大小插件页面：

Default@2x~iphone~anyany.png (= 1334x1334 = 667x667@2x)
Default@2x~iphone~comany.png (= 750x1334 = 375x667@2x)
Default@2x~iphone~comcom.png (= 750x750 = 375x375@2x)
Default@3x~iphone~anyany.png (= 2436x2436 = 812x812@3x)
Default@3x~iphone~anycom.png (= 2436x1242 = 812x414@3x)
Default@3x~iphone~comany.png (= 1242x2436 = 414x812@3x)
Default@2x~ipad~anyany.png (= 2732x2732 = 1366x1366@2x)
Default@2x~ipad~comany.png (= 1278x2732 = 639x1366@2x)

我按上述方法调整了图像的大小，并更新了ios平台，并更新cordova-plugin-splashscreen到了最新版本，并修复了第二个问题后将闪光灯恢复为白屏。但是，初始的垃圾图像现在在底部具有白色边框。

— msmfsd
source
1
我可以确认模拟器上的iPhone X随Default@3x~iphone~comany.png - 1242x2436图像
— 一起
值得注意的是，iPhone X的合适尺寸如下：肖像：1125px×2436px ...风景：2436px×1125px
— Sterling Bourne
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.