Ionic v1安全区域在Xcode11.5模拟器上不起作用

Question

在将Xcode 10升级到11.5并升级了cordova/ionic v1应用程序的其他组件后，以前在iPhoneX/iPhone11上实现全屏显示的解决方案不再有效。屏幕向上推到notch后面。

在index.html中：<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

在CSS body{ }和离子.tabs { }中，以下代码不再起作用：

body {
  padding-top: constant(safe-area-inset-top) ;
  padding-top: env(safe-area-inset-top) ;
}

.tabs {
  padding-top: constant(safe-area-inset-top) ;
  padding-top: env(safe-area-inset-top) ;
}

有谁有解决这个问题的办法吗？

我不确定这是否相关，但我开始怀疑是不是。我得到了一些吞咽消息cannot load gulp ...在开始编译的应用程序从命令行界面。我的应用程序编译时出错或失败--并且可以很好地部署到模拟器设备上。但我想知道是不是gulp/sass问题导致了我所看到的safe zone UI布局问题。

% ionic cordova build ios
> ionic-v1 build
[08:16:10] Cannot load gulp: ReferenceError: primordials is not defined
[08:16:10] Cannot load gulp: ReferenceError: primordials is not defined
[08:16:10] Cannot run sass task: missing in gulpfile.js
[08:16:10] Cannot load gulp: ReferenceError: primordials is not defined
> cordova build ios

和我的构建环境：

% ionic info

Ionic:
   Ionic CLI         : 6.10.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework   : ionic1 1.0.0
   @ionic/v1-toolkit : 1.0.22

Cordova:
   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 32 other plugins)

Utility:
   cordova-res : 0.15.1
   native-run  : not installed

System:
   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v14.5.0 (/usr/local/Cellar/node/14.5.0/bin/node)
   npm        : 6.14.5
   OS         : macOS Catalina
   Xcode      : Xcode 11.5 Build version 11E608c

% gulp -v
CLI version: 2.3.0
Local version: 3.9.1

Answer 1

我现在在我的应用程序的底部有我的标签-我最初的帖子，标签栏仍然在顶部。我知道其他人会批评这个答案，但经过几个月的努力，我终于解决了这个问题：

注意:以下解决方案适用于使用UIWebView的手机- iOS不再接受该解决方案。下面是针对WkWebView的自定义解决方案

在Xcode中，在目标->常规上，取消选中隐藏状态栏和要求全屏。

在项目index.xml中：

在对所有其他帖子直观的body tag...counter中，我删除了：

body {
  //padding-top: constant(safe-area-inset-top) ;  - remove both of these lines.
  //padding-top: env(safe-area-inset-top) ;  
}

然后我补充道：

/* this is for ion-header-bar for 'notch' iPhones*/
/* the default is 64px and creates a very large/tall nav-title bar */
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {  
  height: 44px;
}

/* this is for parent of ion-nav-title for 'notch' iPhones */
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
  margin-top: 0px; 
}

/* sets margin beneath tabs, pushing them up so they are not behind iPhone home button */
.tab-nav {
  margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
  margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
}

然后在我的app.js文件中，我添加了这段代码来检测手机是否有凹槽-然后相应地隐藏/显示状态栏。对于a槽口电话，StatusBar.show()将把离子头杆推到槽口下方。

if (ionic.Platform.isIOS()) {
  deviceData.iosStatusBar = 20 ;
  if (hasNotch() == true) {
    //global object to track if phone has notch or not.
    deviceData.iosNotch = true ;
    console.log("NOTCH FOUND, Applying safe-area CSS") ;
    // do NOT apply ionic.Platform.fullScreen() if phone has notch
    if (window.StatusBar) {          
      StatusBar.show() ;  // show ios status bar, forces ion-header-bar down below notch
      StatusBar.overlaysWebView(false); 
    }
  } else {
    deviceData.iosNotch = false ;
    // if not notch, then force app to full screen. 
    ionic.Platform.fullScreen();
    if (window.StatusBar) {
      StatusBar.hide();   // hide ios status bar
      StatusBar.overlaysWebView(true);
    }
  }
}

然后函数检测电话是否有凹槽：

function hasNotch() {
  if (CSS.supports('padding-bottom: env(safe-area-inset-bottom)')) {
    let div = document.createElement('div');
    div.style.paddingBottom = 'env(safe-area-inset-bottom)';
    document.body.appendChild(div);
    let calculatedPadding = parseInt(window.getComputedStyle(div).paddingBottom, 10);
    document.body.removeChild(div);
    if (calculatedPadding > 0) {
      return true;
    }
  }
  return false;
}

Answer 2

我之前的回答是针对仍在iPhones上运行UIWebView的离子v1应用程序。但是由于App Store将不再接受带有UIWebView的应用程序，我不得不将我的应用程序切换到WKWebView。CORS有点让人头疼，但更大的问题是，所有为离子v1 UIWebView应用程序工作的代码都在运行WkWebView的同一个离子v1应用程序中中断。

我不知道为什么我总是要做一些特殊的事情来处理notch iPhones，但我确实认为这与仍然在使用离子V1有关。下面我花了很长时间才弄明白，但是对于上面的UIWebView，解决方案要简单得多：

使用带有cordova- TABS --v1--的离子插件的v1 webview：

在app.js中：

if (window.StatusBar) {
  StatusBar.hide() ;
}

在custom.css文件中：

/* this pushes down the ion-header-bar for 'notch' iPhones */
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
  height: 44px;
  margin-top: constant(safe-area-inset-top); /* iOS 11.0 */
  margin-top: env(safe-area-inset-top) ;
}
/* this is for parent of ion-nav-title for 'notch' iPhones */
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
  margin-top: 0px;
}
/* this pushes down ion-content for 'notch' iPhones */
.platform-ios.platform-cordova:not(.fullscreen) .has-header:not(.bar-subheader) {
  top: 44px;  /* this needs to match the height set for ion-header-bar */
  padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
  padding-top: env(safe-area-inset-top) ;
}
/* this pushes button tab bar up from behind iPhone HOME button */
.tabs {
  /* padding not needed, but it eliminates a 1px border at top of nav bar */
  padding-top:0px !important;  /* over rides .tabs @media i ionic.app.css */
  margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
  margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
}