Question

我有一个jquery mobile＆amp;在iOS7中正常工作的php webapp。我最近升级到iOS8进行了一些测试，现在状态栏出现问题，现在重叠了webapp的标题。这似乎也导致我在webapp中上传图像，一旦完成就会打破布局。

编辑：只有在横向模式下打开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>

Answer 1

似乎已在iOS 8.1上修复。

[更新：仅在iPhone上修复，iPad仍然遇到问题。]

在8.0.X上你可以使用

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

因为它似乎使用“黑色半透明”行为，即使使用“默认”值。

有关可用值的详细信息：https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Answer 2

这已在iOS 8.3中修复。

iOS 8 Webapp状态栏在主屏幕模式下重叠webapp标题

2 个答案: