iPhone地址栏阻止HTML页面标题按钮？答案

【问题标题】：iPhone Address Bar blocks HTML Page Header Buttons?iPhone地址栏阻止HTML页面标题按钮？
【发布时间】：2013-12-08 12:30:16
【问题描述】：

我有一个带有两个标题按钮的移动网站。在 iPhone 的纵向模式下，它可以正常工作。我可以按下按钮。

问题来了：

当我切换到纵向模式并尝试点击按钮时，会显示原生 iPhone 地址栏。它出现在标题上方，所以我无法按下按钮。

图片显示问题：

按下一个按钮后，您会看到：

我怎样才能避免这个问题？

有没有办法检测 iPhone 浏览器栏是否显示给用户？

编辑：当您使用 Safari 浏览器时，无论您在什么页面上，将您的手机变成横向并在页面顶部点击太多，地址栏就会显示出来。如果您的页面有一个固定的标题栏，您将无法访问它。

编辑：当我固定标题位置时，当方向变为横向并且显示地址栏时，我无法再点击标题按钮。

编辑：这是我使用的示例项目：http://mobilegwt.appspot.com/showcase/ 你可以在 iPhone 上尝试一下，看看我在图片中显示的效果。

【问题讨论】：

你能链接到页面吗？
首先您说它在纵向模式下工作，然后您写道您切换到纵向模式。你是说风景吗？第二张图片是地址栏，而不是搜索栏。搜索栏看起来不同。 IOS是什么版本的？多年来我没有遇到过这个问题，我正在努力记住它是什么。您的页面中是否有隐藏地址栏的脚本？
@ChristinaArasmoBeymer 我用的是 iOS7。当您使用 Safari 浏览器时，无论您在哪个页面上，将手机变成横向并在页面顶部点击太多，地址栏就会显示出来。如果您的页面有一个固定的标题栏，您将无法访问它。你看到解决方案了吗？
这是否相关：blog.blairvanderhoof.com/post/62792573161/…
@ChristinaArasmoBeymer 它很接近，但我没有电话差距我有一个 WebApp。

标签： iphone css html mobile

【解决方案1】：

您可以尝试为您的身体添加最小高度。

<style>
    body { min-height: 505px; }
</style>

这是source。

【讨论】：

这是一个我使用的示例项目：mobilegwt.appspot.com/showcase 你可以在 iPhone 上尝试一下，看看我在图片中显示的效果。

【解决方案2】：

您是否尝试过在正文中添加填充？所有的固定头设计都有这个。正文的填充等于您网站上包含图标的栏的高度。如果仅在横向上，您可以在媒体查询中执行它们：

/* iPhone 4" screen: landscape */
@media screen and (aspect-ratio: 568/114) and (device-aspect-ratio: 320/568), screen and (aspect-ratio: 568/320) and (device-aspect-ratio: 320/568) {

body {padding-top:20px} /*your padding*/

}

【讨论】：

当我对正文进行填充时，固定标题栏和屏幕顶部之间不是有间隙吗？
没有。如果它是相对定位的条，那么可以，但是固定定位（位置：固定）条不会有间隙。
这并不能解决问题，它只会增加标题的高度。
如果你看这个：getbootstrap.com/examples/starter-template 这是一个 50px 高度和 50px 顶部填充的固定导航栏，当你旋转你的设备时，导航栏会被掩盖吗？
好吧getbootstrap.com/examples/starter-template 很棒。它正在按我的意愿工作。我该怎么做？

【解决方案3】：

也许您应该尝试添加元标记以在全屏模式下运行：

<meta name="apple-mobile-web-app-capable" content="yes" />

引用于this link。

编辑

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

【讨论】：

尝试编辑和this plugin，确保您已刷新网址
好吧，如果我将网络应用程序保存到我的主屏幕，那么一切都很好。当我在我的移动 Safari 浏览器中使用该应用程序时会出现此问题。
还有插件吗？
这是一个我使用的示例项目：mobilegwt.appspot.com/showcase 你可以在 iPhone 上尝试一下，看看我在图片中显示的效果。
也许你可以看看this link