logo标签列表

禁用移动设备上的地址栏隐藏

javascripthtmlcssmobile
7
我正在开发一个移动网站，其中“页面”具有占用整个屏幕的div，并且您可以在每个页面之间滚动。问题是，当用户向下滚动时，窗口会调整大小，因为地址栏会隐藏。这会导致当您滚动到底部时，地址栏会隐藏，从而引起问题。
在移动设备上，是否可能始终显示地址栏？
1
我相信您可以将<body>的高度设置为与视口相同，并向<body>添加滚动条。 - Derek 朕會功夫
4个回答
11

你可以使用 div 包装你的 HTML，并像这样操作：http://jsfiddle.net/DerekL/Fhe2x/show

$("html, body, #wrapper").css({
    height: $(window).height()
});

它可以在Android和iOS上运行。

啊，我明白了。所以 div 的大小与 body 相同，但可以滚动。这可能有效，我很快就会尝试一下。谢谢！ - Randy
这很棒。此外，如果您需要保留多个div（可能是因为您有锚点或固定滚动的javascript函数），则可以将Derek的示例应用于每个“fullpage-div”：当滚动时地址栏不会消失，但不会出现调整大小的问题。然后，您可以在全屏模式下保持无需滚动的状态，而不会出现“错误”。在Android 5.0上使用Chrome进行了测试。 - noobsharp
谢谢！很棒的效果。我无法表达我的感激之情，因为我已经花了5个小时来解决这个问题。即使在普通的问题中看到jQuery也不会让我困扰。 - pishpish
1
有趣的事实 - 它实际上并不能防止地址栏隐藏，但确实可以防止窗口高度变化导致的布局移位。 - pishpish
3
最简单的实现方式是在容器内滚动，而不是滚动整个文档。 例如：
<html><body>
  <div id="scrollable-content"> ... all your content here ... </div>
</body></html>

html, body {
  height: 100%;
}

#scrollable-content {
  height: 100%;
  overflow-y: scroll;
}
0
你是否在看iPhone？我不知道Android，但是在iOS 7上的iPhone上是不可能的。你可以做的一件事是使用minimal-ui来始终最小化导航栏，保持窗口的一致大小：

<meta name="viewport" content="width=device-width, minimal-ui">

http://visuellegedanken.de/2014-03-13/viewport-meta-tag-minimal-ui/

希望这能有所帮助！

谢谢，但我想要完全相反的。我目前正在研究Android，但我将来会考虑iOS浏览器。 - Randy
1
更新：minimal-ui 已经从 iOS 8 中删除。 - lachlanjc
0

由于这个问题出现在移动设备上，因此使用媒体查询并将body和html的位置设置为“fixed”，现在您会发现搜索栏不会隐藏。但是对于需要滚动的页面，它将无法滚动。为了解决这个问题，使用overflow-y:scroll;

@media only screen and (max-width: 500px){
    /* to prevent auto hiding of the search bar */
    body, html{
        height: 100%;
        position: fixed;
        width: 100%;
        overflow-y: scroll;
    }
    
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接