logo标签列表

iOS 7状态栏与Phonegap的问题

ioscordovauiwebviewios7statusbar
91

在iOS 7中，Phonegap应用程序将出现在状态栏下面。这可能会使位于屏幕顶部的按钮/菜单难以点击。

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

我已经尝试使用CSS偏移整个网页，但似乎不起作用。是否有一种方法可以像在iOS 6中一样改变整个UIWebView的偏移量或只是让状态栏的行为像以前一样？

谢谢

“状态栏问题”到底是什么？有没有可以复现的示例代码？ - Raptor
1
@ShivanRaptor 在iOS 7中，状态栏现在是视图的一部分，因此如果您有之前iOS版本中位于屏幕顶部的内容，它现在会出现在状态栏下面，而不是自动推到其正下方，这可能会导致一些问题。我的建议是为您的内容创建一个包装器，并设置20像素的margin-top。 - Andrew Lively
@AndrewLively - 当页面滚动时，这并不真正起作用，有没有办法移动UIWebView？ - Luddig
18个回答
1
1
我使用以下代码片段来检测iOS7并将类添加到body。然后，我为该类设置样式，在我的容器顶部添加了20px的边距。请确保已安装“device”插件，并且此代码位于“deviceready”事件内。从阅读中得知，据说Phonegap的下一个更新（我认为是3.1）将更好地支持iOS7状态栏的更改。因此，这可能只需要作为短期解决方案。
if(window.device && parseFloat(window.device.version) >= 7){
  document.body.classList.add('fix-status-bar');
}
0
为了在竖屏模式下保持状态栏可见，但在横屏模式下隐藏它（即全屏），请尝试以下操作：
在 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开发人员，所以我摸索着找到了这个解决方案）。

0

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

在经历了持续的挫折和大量互联网搜索之后，这些是您需要采取的步骤：

  1. 确保您使用了状态栏插件
  2. 将以下设置添加到您的config.xml文件中：

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

  • 在 onDeviceReady 中使用以下代码：

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

    • 在iOS和Android上对我有效。

    祝你好运！

    0
    首先，在您的项目中添加设备插件。插件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");
    }
}
    0

    在AppDelegate.m文件中的didFinishLaunchingWithOptions事件里写入以下代码（恰好在最后一行代码"return YES;"之前）：

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

    我会等待您的反馈！:)

    这段代码看起来非常好用，可以隐藏状态栏并解决问题。昨天我还找到了一小段代码，可以重新调整UIWebView的大小并将其移动到下方。我也将这段代码添加为答案 :) - Luddig
    太好了。我的代码只是使用一种简单易懂的方法来实现它！我们所有人都在用不同的方法做同样的事情 :) - Ehsan
    0

    如果我们使用相机插件来创建图库，状态栏将会出现问题，为了解决这个问题，请添加这行代码

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

    到

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

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

    0

    在AppDelegate.m文件中，在didFinishLaunchingWithOptions事件的开头编写以下代码。

    CGRect screenBounds = [[UIScreen mainScreen] bounds]; // 修复状态栏 ------------------------------- NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."]; if ([[vComp objectAtIndex:0] intValue] >= 7) { // iOS 7或以上版本 CGRect newWebViewBounds = CGRectMake( 0, 20, screenBounds.size.width, screenBounds.size.height-20 ); screenBounds = newWebViewBounds; } // ------------------------------- 修复状态栏结束

    并且适用于iOS 7及以上版本的修复。

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接