个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 05:46:30 28 4
gpt4 key购买 nike

我有一个 jquery mobile 和 php webapp，可以在 iOS7 中正常工作。我最近升级到 iOS8 进行一些测试，但我遇到了状态栏现在与 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>

最佳答案

似乎已在 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

关于jquery - iOS 8 Webapp 状态栏在主屏幕模式下与 webapp 标题重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26298717/

28 4 0
文章推荐： java - 通过Java执行.sql文件
文章推荐： java - JFreeChart - 在 CombinedDomainXYPlot 中显示/隐藏子图
文章推荐： perl - 我可以使用希伯来文和英文文本在 Perl 中生成 PDF 文件吗？
文章推荐： python - 是否有使用Mongodb和Django的明确方法？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com