Ionic v1 安全区域不适用于 Xcode 11.5 模拟器

Posted 2023-03-15

【中文标题】Ionic v1 安全区域不适用于 Xcode 11.5 模拟器

【英文标题】：Ionic v1 safe areas not working on Xcode 11.5 simulator

【发布时间】：2020-07-16 12:44:22

【问题描述】：

在将 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 和 Ionics .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) ;

有没有人可以解决这个问题？

我不确定这是否相关，但我开始怀疑它是。在从 CLI 编译应用程序开始时，我收到了一些 gulp 消息 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

【问题讨论】：

我回滚到 node@10 - 与修复 gulp/sass 错误的旧 Mac 上的工作相同，但没有解决 UI 问题，safe-areas 仍然没有很荣幸，我的 UI 在 iPhoneX 上被推到了后面

我这里也有同样的问题。您找到解决此问题的方法了吗？

@FernandoGhisi - 我做到了。实际上。我昨晚才想通了。原来我的项目中有其他设置导致冲突。让我在下面发布我的最终解决方案作为答案。

@FernandoGhisi - 我的决议贴在下面。

【参考方案1】：

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

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

将 Ionic v1 TABS 与 cordova-plugin-ionic-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 */

【参考方案2】：

我的标签现在位于我的应用底部 - 我原来的帖子标签栏仍在顶部。我知道其他人会批评这个答案，但经过几个月与缺口手机布局的角力，我终于解决了问题：

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

在 Xcode 中，在 Target -> General 上，取消选中 Hide Status Bar & Requires full screen。

在项目 index.xml 中：

在正文标签中...与所有其他帖子的直觉相反，我删除了：

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 文件中，我添加了这段代码来检测手机是否有缺口 - 然后相应地隐藏/显示状态栏。使用缺口手机，StatusBar.show() 会将 ion-header-bar 推到缺口下方。

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;

【讨论】：

非常感谢，@rolinger。它似乎工作得很好！我仍然遇到标签栏的一些问题（我的位于某些屏幕的顶部），但您给了我更多资源可供使用。

@FernandoGhisi - 很酷。很高兴它对你有效。顶部的选项卡有什么问题？如果它们仍然落后于缺口...删除.nav-bar margin-bottom: ... 并重新添加body padding-top: ...。对于底部的标签，body padding-top 代码将我的标签推到屏幕下方/离开屏幕。您需要将边距放在顶部，而不是底部。如果这有效，请接受这个答案是正确的。谢谢。

事实上，选项卡低于预期位置。无论如何，我最终使用了一个更简单的解决方案（更具体到我的情况），在 CSS 中进行了一些调整——但你给了我一些非常有用的提示。再次感谢。