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应用程序标头

回答

相关问题