1. 程式人生 > >phonegap解決iphone頂部狀態列位置的問題

phonegap解決iphone頂部狀態列位置的問題

在 iOS7, 所有的應用都是全屏執行的,此時狀態列層疊在應用介面上. 導致頭部的內容或者介面被覆蓋: 
ios71
社群中討論解決該問題的方法. 他們中的一些涉及原生程式碼,以相容web檢視.其實最簡單和乾淨的解決方案是增加一個20畫素的頂部邊緣到文件的body加入 CSS. 你可以通過版本檢查避免新增 margin 屬性在 iOS 6. 程式碼如下:
function onDeviceReady() {
    if (parseFloat(window.device.version) >= 7.0) {
          document.body.style.marginTop = "20px";
    }
}
document.addEventListener('deviceready', onDeviceReady, false);

修復結果: 
ios72

附上iOS原生程式碼解決方案:

- (void)viewWillAppear:(BOOL)animated  
{
    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];  
}