Phonegap이있는 iOS 7 상태 표시 줄

iOS 7에서는 Phonegap 애플리케이션이 상태 표시 줄 아래에 나타납니다. 이로 인해 화면 상단에있는 버튼 / 메뉴를 클릭하기가 어려울 수 있습니다.

Phonegap 애플리케이션의 iOS 7에서이 상태 표시 줄 문제를 해결하는 방법을 아는 사람이 있습니까?

CSS로 전체 웹 페이지를 오프셋하려고 시도했지만 작동하지 않는 것 같습니다. 전체 UIWebView를 오프셋하거나 상태 표시 줄이 iOS6에서와 같이 동작하도록 만드는 방법이 있습니까?

감사

다른 스레드에서 답변을 찾았지만 다른 사람이 궁금해 할 경우 질문에 답변하겠습니다.

그냥 교체 viewWillAppear에 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];
}

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;
}

phonegap 용 플러그인을 설치하십시오 : https://build.phonegap.com/plugins/505

그리고 아래와 같이 올바른 설정을 사용하여 webview의 오버레이를 제어하십시오.

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

나를 위해 Phonegap 3.3.0에서는 작동합니다.

자세한 내용은 Github 프로젝트 페이지 : https://github.com/phonegap-build/StatusBarPlugin

상태 표시 줄을 숨기려면 MainViewController.m함수 아래의 파일 에 다음 코드를 추가하십시오.-(void)viewDidUnload

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

답변 https://stackoverflow.com/a/19249775/1502287 이 저에게 효과적이지만 카메라 플러그인 (및 잠재적으로 다른 사용자)과 "height = device- 높이 "(높이 부분을 설정하지 않으면 내 경우에는 키보드가 뷰 위에 나타나고 도중에 일부 입력이 숨겨집니다).

카메라 뷰를 열고 앱으로 돌아갈 때마다 viewWillAppear 메서드가 호출되고 뷰가 20px만큼 축소됩니다.

또한 뷰포트의 장치 높이에는 20 픽셀의 추가 픽셀이 포함되어 콘텐츠를 스크롤 가능하고 웹뷰보다 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).
        // Dunno if it's 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" />

이제 모든 것이 잘 작동합니다.

(app name)-Info.plistXCode 의 앱 파일로 이동하여 키를 추가하십시오.

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

이것은 문제없이 나를 위해 작동합니다.

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" />

나는 설치하고 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/

정확한 문제를 해결하는 새로운 Cordova StatusBar 플러그인을 참조하십시오. http://docs.icenium.com/troubleshooting/ios7-status-bar#solution 옵션 # 3

iOS7이 감지되면 다음 코드를 사용하여 본문에 클래스를 추가합니다. 그런 다음 해당 클래스의 스타일을 지정하여20px 컨테이너 상단에 여백 . "device"플러그인이 설치되어 있고이 코드가 "deviceready"이벤트 내에 있는지 확인하십시오.

읽어 보니 Phonegap (3.1)의 다음 업데이트가 iOS7의 상태 표시 줄에 대한 변경 사항을 더 잘 지원할 것이라고 들었습니다. 따라서 이것은 단기 수정으로 필요할 수 있습니다.

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

Ludwig의 대답 은 저에게 효과적 이었습니다.

그의 대답을 사용하고 지금 흰색 여백의 색상을 변경하려는 사람은 (사소 해 보일 수 있지만 저를 당황하게 만들었습니다) 다음을 참조하십시오.

iOS7 상태 표시 줄 오버레이 문제를 해결하기 위해 UIWebView를 아래로 슬라이드 한 후 UIWebView 배경색을 어떻게 변경할 수 있습니까?

또 다른 방법은 이전 버전과 호환되는 것 입니다. 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;
  }
}

이 솔루션은 iOS 7.0최신 iOS 사용자가 이상하고 오래된 .

내부에 다음과 같은 코드를 작성 AppDelegate.m 에서 didFinishLaunchingWithOptions의 이벤트 (정확하게 코드의 마지막 줄 앞에 " 반환 YES를, ") :

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

여러분의 피드백을 기다리겠습니다! :)

이미지 갤러리에 카메라 플러그인을 사용하면 상태 표시 줄이 다시 표시되므로 문제를 해결하려면이 줄을 추가하세요.

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

에

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

플러그인 목록의 CVDCamera.m 내부 함수

내부에 다음과 같은 코드를 작성 AppDelegate.m 에서 didFinishLaunchingWithOptions의 시작에서 이벤트를.

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 이상에서 수정하십시오.

상태 표시 줄을 세로로 표시하고 가로로 (예 : 전체 화면) 숨기려면 다음을 시도하십시오.

에서 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 개발자가 아니므로 나는이 해결책에 내 길을 더듬었다).

먼저 프로젝트에 장치 플러그인을 추가하십시오. 플러그인 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");
    }
}

상태 표시 줄 배경을 제어하는 ​​가장 좋은 방법-2017

지속적인 좌절, 인터넷에서 많은 검색을 한 후에 수행해야 할 단계는 다음과 같습니다.

1. 당신이 사용하는지 확인하십시오 상태 표시 줄 플러그인
2. 이 설정을 config.xml에 추가하십시오.

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

3. onDeviceReady 에서 다음 코드를 사용하십시오.

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

iOS 및 Android에서 작동합니다.

행운을 빕니다!