ios - 带有 Phonegap 的 iOS 7 状态栏

Question

在 iOS 7 中，Phonegap 应用程序将出现在状态栏下方。这会使点击屏幕顶部的按钮/菜单变得困难。

是否有人知道如何在 Phonegap 应用程序中修复 iOS 7 上的此状态栏问题？

我试图用 CSS 来抵消整个网页，但它似乎不起作用。有没有办法像偏移整个 UIWebView 或者只是让状态栏的行为像在 iOS6 中一样？

谢谢

score 143 · Accepted Answer

我在另一个线程上找到了答案，但如果其他人想知道，我会回答这个问题。

只需将viewWillAppearin替换为MainViewController.m：

- (void)viewWillAppear:(BOOL)animated {
    // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
    // you can do so here.
    // Lower screen 20px on ios 7
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
    }
    [super viewWillAppear:animated];
}

score 37 · Accepted Answer

除了 Ludwig Kristoffersson 的调整大小修复，我建议更改状态栏颜色：

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.

    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
    }
    self.view.backgroundColor = [UIColor blackColor];
}
-(UIStatusBarStyle)preferredStatusBarStyle{
    return UIStatusBarStyleLightContent;
}

score 22 · Accepted Answer

请为phonegap安装该插件：https ://build.phonegap.com/plugins/505

并使用如下正确设置来控制 webview 的覆盖：

<preference name="StatusBarOverlaysWebView" value="false" />

对我来说，使用 Phonegap 3.3.0 就可以了。

更多信息，在 Github 项目页面： https ://github.com/phonegap-build/StatusBarPlugin

score 20 · Accepted Answer

要隐藏状态栏，在MainViewController.m函数下的文件中添加如下代码-(void)viewDidUnload

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

score 15 · Accepted Answer

回答https://stackoverflow.com/a/19249775/1502287对我有用，但我必须对其进行一些更改以使其与相机插件（可能还有其他插件）和带有“height = device-”的视口元标记一起使用高度”（在我的情况下，不设置高度部分会导致键盘出现在视图上方，沿途隐藏一些输入）。

每次您打开相机视图并返回您的应用程序时，都会调用 viewWillAppear 方法，并且您的视图会缩小 20px。

此外，视口的设备高度将包括额外的 20 像素，使内容可滚动并且比 web 视图高 20 像素。

这是相机问题的完整解决方案：

在 MainViewController.h 中：

@interface MainViewController : CDVViewController
@property (atomic) BOOL viewSizeChanged;
@end

在 MainViewController.m 中：

@implementation MainViewController

@synthesize viewSizeChanged;

[...]

- (id)init
{
    self = [super init];
    if (self) {
        // On init, size has not yet been changed
        self.viewSizeChanged = NO;
        // Uncomment to override the CDVCommandDelegateImpl used
        // _commandDelegate = [[MainCommandDelegate alloc] initWithViewController:self];
        // Uncomment to override the CDVCommandQueue used
        // _commandQueue = [[MainCommandQueue alloc] initWithViewController:self];
    }
    return self;
}

[...]

- (void)viewWillAppear:(BOOL)animated
{
    // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
    // you can do so here.
    // Lower screen 20px on ios 7 if not already done
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7 && !self.viewSizeChanged) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
        self.viewSizeChanged = YES;
    }
    [super viewWillAppear:animated];
}

现在对于视口问题，在您的 deviceready 事件侦听器中，添加以下内容（使用 jQuery）：

if (window.device && parseFloat(window.device.version) >= 7) {
  $(window).on('orientationchange', function () {
      var orientation = parseInt(window.orientation, 10);
      // We now the width of the device is 320px for all iphones
      // Default height for landscape (remove the 20px statusbar)
      var height = 300;
      // Default width for portrait
      var width = 320;
      if (orientation !== -90 && orientation !== 90 ) {
        // Portrait height is that of the document minus the 20px of
        // the statusbar
        height = document.documentElement.clientHeight - 20;
      } else {
        // This one I found experimenting. It seems the clientHeight
        // property is wrongly set (or I misunderstood how it was
        // supposed to work).
        // I don't know if it is specific to my setup.
        width = document.documentElement.clientHeight + 20;
      }
      document.querySelector('meta[name=viewport]')
        .setAttribute('content',
          'width=' + width + ',' +
          'height=' + height + ',' +
          'initial-scale=1.0,maximum-scale=1.0,user-scalable=no');
    })
    .trigger('orientationchange');
}

这是我用于其他版本的视口：

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />

现在一切正常。

score 6 · Accepted Answer

(app name)-Info.plist尝试在 XCode 中进入应用程序的文件并添加密钥

view controller-based status bar appearance: NO
status bar is initially hidden : YES

这对我来说没有问题。

score 6 · Accepted Answer

对于 Cordova 3.1+，有一个插件可以处理 iOS 7+ 状态栏的行为变化。

这在此处有很好的记录，包括如何将状态栏恢复到 iOS7 之前的状态。

要安装插件，请运行：

cordova plugin add org.apache.cordova.statusbar

然后将其添加到 config.xml

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarStyle" value="default" />

score 5 · Accepted Answer

org.apache.cordova.statusbar我通过安装并添加到我的顶部来解决我的问题config.xml：

<preference name="StatusBarOverlaysWebView" value="false" /> 
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />

这些配置仅适用于 iOS 7+

参考： http ://devgirl.org/2014/07/31/phonegap-developers-guid/

score 3 · Accepted Answer

请参阅解决该确切问题的新 Cordova 状态栏插件。 http://docs.icenium.com/troubleshooting/ios7-status-bar#solution选项#3

score 1 · Accepted Answer

如果检测到 iOS7，我使用以下代码向主体添加一个类。然后我设置该类的样式以20px在容器顶部添加边距。确保您已安装“设备”插件，并且此代码位于“设备就绪”事件中。

通过阅读，我听说 Phonegap 的下一次更新（我相信是 3.1）将更好地支持对 iOS7 状态栏的更改。因此，这可能只是需要作为短期修复。

if(window.device && parseFloat(window.device.version) >= 7){
  document.body.classList.add('fix-status-bar');
}

score 1 · Accepted Answer

路德维希的回答对我有用。

对于使用他的答案并且现在希望更改白边颜色的任何人（可能看起来微不足道，但让我难过），请参阅：

如何在向下滑动 UIWebView 以修复 iOS7 状态栏覆盖问题后更改 UIWebView 背景颜色？

score 1 · Accepted Answer

另一种方法是向后兼容。根据iOS 7（顶部有额外的 20px 边距）制作 HTML 以提供该full screen外观并为iOS < 7.0. 类似于以下内容MainViewController.m：

- (void)viewDidLoad
{
  [super viewDidLoad];

  if ([[[UIDevice currentDevice] systemVersion] floatValue] < 7.0) {
    CGRect viewBounds = [self.webView bounds];
    viewBounds.origin.y = -20;
    viewBounds.size.height = viewBounds.size.height + 20;
    self.webView.frame = viewBounds;
  }
}

此解决方案不会在 foriOS 7.0和 above 顶部留下黑条，现代 iOS 用户会发现它很奇怪和old。

score 0 · Accepted Answer

在didFinishLaunchingWithOptions事件中的AppDelegate.m中编写以下代码（恰好在其最后一行代码“ return YES; ”之前）：

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) 
{
    [application setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
}

我会等待你的反馈！:)

score 0 · Accepted Answer

如果我们为图片库使用相机插件，状态栏会回来，所以要解决这个问题，请添加这一行

 [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];

至

- (void)imagePickerController:(UIImagePickerController*)picker didFinishPickingMediaWithInfo:(NSDictionary*)info {...}

插件列表中 CVDCamera.m 内的函数

score 0 · Accepted Answer

在启动时的didFinishLaunchingWithOptions事件中的AppDelegate.m中编写以下代码。

CGRect screenBounds = [[UIScreen mainScreen] bounds]; // Fixing status bar ------------------------------- NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."]; if ([[vComp objectAtIndex:0] intValue] >= 7) { // iOS 7 or above CGRect newWebViewBounds = CGRectMake( 0, 20, screenBounds.size.width, screenBounds.size.height-20 ); screenBounds = newWebViewBounds; } // ------------------------------- Fixing status bar End

并修复iOS 7及更高版本。

score 0 · Accepted Answer

要使状态栏保持纵向可见但横向隐藏（即全屏），请尝试以下操作：

在MainViewController.h：

@interface MainViewController : CDVViewController
@property (atomic) NSInteger landscapeOriginalSize;
@property (atomic) NSInteger portraitOriginalSize;
@end

在MainViewController.m：

@implementation MainViewController

@synthesize landscapeOriginalSize;
@synthesize portraitOriginalSize;

...

- (void)viewWillAppear:(BOOL)animated
{
    // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
    // you can do so here.

    [super viewWillAppear:animated];

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(orientationChanged:) name:UIDeviceOrientationDidChangeNotification object:nil];
}

- (void)orientationChanged:(NSNotification *)notification {
    [self adjustViewsForOrientation:[[UIApplication sharedApplication] statusBarOrientation]];
}

- (void)viewDidDisappear:(BOOL)animated {
    [[NSNotificationCenter defaultCenter]removeObserver:self name:UIDeviceOrientationDidChangeNotification object:nil];
}

- (void) adjustViewsForOrientation:(UIInterfaceOrientation) orientation {
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect statusBarFrame = [UIApplication sharedApplication].statusBarFrame;
        CGRect frame = self.webView.frame;

        switch (orientation)
        {
            case UIInterfaceOrientationPortrait:
            case UIInterfaceOrientationPortraitUpsideDown:
            {
                if (self.portraitOriginalSize == 0) {
                    self.portraitOriginalSize = frame.size.height;
                    self.landscapeOriginalSize = frame.size.width;
                }
                frame.origin.y = statusBarFrame.size.height;
                frame.size.height = self.portraitOriginalSize - statusBarFrame.size.height;
            }
                break;

            case UIInterfaceOrientationLandscapeLeft:
            case UIInterfaceOrientationLandscapeRight:
            {
                if (self.landscapeOriginalSize == 0) {
                    self.landscapeOriginalSize = frame.size.height;
                    self.portraitOriginalSize = frame.size.width;
                }
                frame.origin.y = 0;
                frame.size.height = self.landscapeOriginalSize;
            }
                break;
            case UIInterfaceOrientationUnknown:
                break;
        }

        self.webView.frame = frame;
    }
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Do any additional setup after loading the view from its nib.

    // Change this color value to change the status bar color:
    self.view.backgroundColor = [UIColor colorWithRed:0/255.0f green:161/255.0f blue:215/255.0f alpha:1.0f];
}

这是我在这个和链接的 StackOverflow 讨论中找到的内容、来自 Cordova StatusBar 插件的一些代码（以免硬编码 20px 值）以及我的一些咒语（我不是 iOS 开发人员所以我摸索到了这个解决方案）。

score 0 · Accepted Answer

首先，在您的项目中添加设备插件。插件 ID 是：org.apache.cordova.device 和存储库是：https ://github.com/apache/cordova-plugin-device.git

之后使用此函数并在每个页面或屏幕上调用它：-

function mytopmargin() {
    console.log("PLATform>>>" + device.platform);
    if (device.platform === 'iOS') {
        $("div[data-role='header']").css("padding-top", "21px");
        $("div[data-role='main']").css("padding-top", "21px");
    } else {
        console.log("android");
    }
}

score 0 · Accepted Answer

控制状态栏背景的最佳方式 - 2017

经过不断的挫折，在互联网上进行了大量搜索，这些是您需要采取的步骤：

确保您使用状态栏插件
将此设置添加到您的 config.xml：

<preference name="StatusBarOverlaysWebView" value="false" />

在onDeviceReady上使用以下代码

    StatusBar.show();
    StatusBar.overlaysWebView(false);
    StatusBar.backgroundColorByHexString('#209dc2');

它适用于 iOS 和 Android。

祝你好运！

ios - 带有 Phonegap 的 iOS 7 状态栏

18 回答 18

Related

Reference