91

iOS 7 では、Phonegap アプリケーションがステータス バーの下に表示されます。これにより、画面上部に配置されたボタン/メニューをクリックしにくくなる場合があります。

Phonegap アプリケーションで iOS 7 のこのステータス バーの問題を修正する方法を知っている人はいますか?

Web ページ全体を CSS でオフセットしようとしましたが、うまくいかないようです。UIWebView全体をオフセットしたり、ステータスバーをiOS6のように動作させる方法はありますか?

ありがとう

4

18 に答える 18

143

別のスレッドで答えを見つけましたが、他の誰かが疑問に思った場合に備えて質問に答えます。

viewWillAppearinMainViewController.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];
}
于 2013-10-08T13:59:04.647 に答える
37

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;
}
于 2013-11-09T23:16:39.663 に答える
20

ステータスバーを非表示にするにはMainViewController.m、関数の下のファイルに次のコードを追加します-(void)viewDidUnload

- (BOOL)prefersStatusBarHidden
{
    return YES;
}
于 2013-10-24T16:15:00.057 に答える
15

回答https://stackoverflow.com/a/19249775/1502287はうまくいきましたが、カメラプラグイン(および潜在的に他のプラグイン)と「height = device-」のビューポートメタタグで機能するように少し変更する必要がありました高さ」(高さの部分を設定しないと、私の場合、キーボードがビューの上に表示され、途中でいくつかの入力が隠されます)。

カメラ ビューを開いてアプリに戻るたびに、viewWillAppear メソッドが呼び出され、ビューが 20 ピクセル縮小されます。

また、ビューポートのデバイスの高さには 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" />

そして、すべてがうまく機能するようになりました。

于 2013-10-16T15:46:16.663 に答える
6

(app name)-Info.plistXCode でアプリのファイルに移動して、キーを追加してみてください

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

これは問題なく機能します。

于 2013-11-22T09:04:16.427 に答える
5

org.apache.cordova.statusbarをインストールして top に追加することで問題を解決し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/

于 2015-03-10T18:45:13.163 に答える
3

その正確な問題に対処する新しい Cordova StatusBar プラグインを参照してください。 http://docs.icenium.com/troubleshooting/ios7-status-bar#solutionオプション #3

于 2013-11-20T23:42:20.177 に答える
1

ルートヴィヒの答えは私にとってはうまくいきました。

彼の答えを使用して、白いマージンの色を変更しようとしている人は誰でも(些細なことのように思えるかもしれませんが、困惑しました)、これを参照してください:

iOS7 ステータス バー オーバーレイの問題を修正するために UIWebView を下にスライドさせた後、UIWebView の背景色を変更するにはどうすればよいですか?

于 2013-10-17T06:47:37.867 に答える
1

iOS7 が検出された場合、次のコードを使用してボディにクラスを追加します。20px次に、そのクラスのスタイルを設定して、コンテナーの上部に余白を追加します。「device」プラグインがインストールされていること、およびこのコードが「deviceready」イベント内にあることを確認してください。

いろいろ読んでみると、Phonegap の次のアップデート (3.1 だと思います) では、iOS7 のステータス バーの変更がより適切にサポートされるようになると聞きました。したがって、これは短期的な修正としてのみ必要になる場合があります。

if(window.device && parseFloat(window.device.version) >= 7){
  document.body.classList.add('fix-status-bar');
}
于 2013-10-06T17:55:14.637 に答える
0

まず、プロジェクトに Device プラグインを追加します。プラグイン 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");
    }
}
于 2016-05-06T06:04:39.657 に答える
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 開発者ではないので、私はこの解決策にたどり着きました)。

于 2015-01-23T14:42:28.727 に答える