gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 05:46:30 30 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/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com