iOS 8 Web應用程序狀態欄在主屏幕模式下重疊web應用程序標頭

我有一個jquery手機& php webapp在iOS7中正常工作。我最近升級到iOS8做了一些測試，我現在遇到了一個問題，現在狀態欄與webapp的頭部重疊。這也似乎導致我的圖像上傳在Web應用程序中打破布局，一旦完成。iOS 8 Web應用程序狀態欄在主屏幕模式下重疊web應用程序標頭

編輯：只有在橫向模式下打開ipad時纔會發生此問題。在縱向模式下，它可以正常工作並顯示狀態欄，然後我的文件上傳工作正常。在8.0.x和8.1 iPad上進行測試。

有沒有人有任何想法？

iOS7 iOS7

iOS8上 iOS8

代碼：

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>My App</title> 
    <meta charset="iso-8859-1"> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="apple-touch-icon" href="apple-touch-icon.png" /> 
    <link rel="shortcut icon" href="apple-touch-icon.png" /> 
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png"/> 

    <link rel="stylesheet" href="./css/grid.css"> 

    <script src="./js/jquery.js"></script> 
    <script src="./js/jqm1.4.4/jquery.mobile-1.4.4.min.js"></script> 
    <script src="./js/jquery.validate.min.js"></script> 
    <script src="./js/bespokeValidateRules.js"></script> 

    <link rel="stylesheet" href="./css/jqm1.4.4/jquery.mobile.external-png-1.4.4.min.css"> 
    <link rel="stylesheet" href="./css/jqm1.4.4/jquery.mobile.inline-png-1.4.4.min.css"> 
    <link rel="stylesheet" href="./css/jqm1.4.4/jquery.mobile.inline-svg-1.4.4.min.css"> 
    <link rel="stylesheet" href="./css/jqm1.4.4/jquery.mobile-1.4.4.css"> 
    <link rel="stylesheet" href="./css/jqm1.4.4/Theme.css"> 
    <link rel="stylesheet" href="./css/jqm1.4.4/jquery.mobile.icons-1.4.4.min.css"> 
    <link rel="stylesheet" href="./css/jqm1.4.4/jquery.mobile.structure-1.4.4.min.css"> 

    <link rel="stylesheet" href="./css/responsiveGrid.css"> 
    <link rel="stylesheet" href="./css/style.css"> 

</head> 
<body> 
    <div data-role="page" id="index" data-theme="a" > 
     <div data-role="header" data-theme="a" data-position="fixed" style="min-height: 40px;"> 

     <div class="ui-grid-b" > 
      <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="margin-left: 28px; "><h5 style='font-size:9pt;'></h5></div></div> 
      <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="text-align: center; "><h1>My App</h1></div></div> 
      <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="margin-right: 28px; text-align: right; "><h5 style='font-size:9pt'></h5></div></div> 
     </div> 
    </div><!-- /header --> 
    <div data-role="content"> 
    <a href="#" id='networkLost' class="ui-btn">Button!!</a> 
    </div><!-- /content --> 
    </div><!-- /page --> 
</body> 
</html>

來源

2014-10-10 Janey

這已被固定在IOS 8.3。

來源

2015-05-06 15:27:18 Janey

好象固定在iOS 8.1。

[更新：修復了iPhone只，iPad的仍然遇到問題]

在8.0.X你可以使用

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

，因爲它似乎使用「黑色半透明」的行爲，甚至使用「默認」值。

來源

2014-10-21 09:54:05

我剛剛安裝了8.1，並且這是不固定的。只有在橫向視圖中打開Web應用程序時纔會出現問題。任何其他想法？ – Janey 2014-10-23 16:40:42

我沒有注意到你在iPad上試過。 iPhone上的iOS 8.1修復了這個問題（至少5個），但我有機會在iPad上進行測試，即使它稍微改變了問題仍然存在的行爲。 – 2014-10-23 22:36:50

我也注意到，如果我離開我的web應用程序打開和屏幕鎖定，當我解鎖屏幕，雖然應用程序仍然沒有起作用。鏈接等。你有沒有注意到這一點？ – Janey 2014-11-05 16:34:33

iOS 8 Web應用程序狀態欄在主屏幕模式下重疊web應用程序標頭

回答

相關問題