防止地址栏隐藏在移动浏览器中答案

【问题标题】：Prevent Address-Bar hiding in mobile Browsers防止地址栏隐藏在移动浏览器中
【发布时间】：2013-08-06 08:17:59
【问题描述】：

我目前正在开发一个水平布局的网站。所有元素都是位置：javascript 的绝对值。它们的大小是用 window.innerHeight 计算的。我的问题是，尽管元素不高于窗口的高度，但我可以向下滚动（地址栏的高度）。这在两个方面令人讨厌。首先，它触发了我当时既不想也不需要的窗口调整大小事件。其次，它不适用于某些内容应该可以垂直滚动的内容框。有时我可以滚动框，但有时会先滚动整个页面（如前所述：地址栏的高度）。是否有任何解决方案可以让我在所有设备上阻止这种地址栏自动隐藏机制。

提前致谢！

这根本不能滚动：http://maxeffenberger.de/test.html

这可以水平滚动（可以看到隐藏的内容）但也可以垂直滚动直到地址栏被隐藏（没有意义，因为没有额外的“垂直”内容需要更多空间：http://maxeffenberger.de/test2.html

【问题讨论】：

我可以向下滚动……它会触发窗口调整大小事件——这听起来很奇怪。你能澄清一下吗？
不是真的滚动。我可以移动页面，直到地址栏被隐藏。这会触发 window.resize 事件，因为在地址栏隐藏后它们的垂直空间更大。
我明白了.. 为什么这是个问题？我假设您要么有一个 fullscreen 的界面，即。没有滚动条，或者你有一个可滚动的界面。在任何一种情况下，都有一个明确的方法来处理这些事件。
页面只能水平滚动。没有任何东西可以垂直滚动（除了在内容框内）。所以我不希望地址栏隐藏行为 - 这没有任何意义。
我还是很困惑。你能禁用垂直滚动吗？ {overflow-y: hidden;} (css)

标签： javascript android css google-chrome safari

【解决方案1】：

使用 javascript window.scrollTo(0, 1);你可以解决这个问题。

查看http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ 的解决方案。

【讨论】：

实际上并没有帮助。我也不想隐藏地址栏。我只是想防止它隐藏;-)
这似乎不再隐藏 Android Chrome 58.0 或 iOS 10.3 Safari 上的地址栏。

【解决方案2】：

最可靠的解决方案可能是使用全屏 API：http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API

【讨论】：

【解决方案3】：

这是我实现它的方式：

html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* iOS velocity scrolling */
}

【讨论】：

完美，刚刚在 android mobile 5.0.1 chrome 版本 57 上测试过。关键的 css 属性是：html { overflow: hidden } 和 body { height:100%;位置：固定； /* 防止过度滚动反弹*/ overflow-y:scroll; -webkit-溢出滚动：触摸； /* iOS 速度滚动 */ }
我推荐的一件事是将其包装在媒体查询中：@media (max-width: 767px) { html { overflow: hidden; } 身体 { 高度：100%;位置：固定； /* 防止过度滚动反弹*/ overflow-y:scroll; -webkit-溢出滚动：触摸； /* iOS 速度滚动 */ } }
实际上，虽然这种技术适用于单个固定背景图像，但它对多个固定背景图像有副作用，如在桌面和移动设备上查看此 codepn 时可以看到的那样。 codepen.io/KerryRuddock/pen/zZbvoR
这真是一个糟糕的解决方案。我知道它有效，但不应该使用。前任。尝试向下滚动，然后刷新页面。你去顶部，而通常你会留在同一个位置
为什么在body上使用'width:50%'？

【解决方案4】：

使用 window.innerHeight 为您的网站设置边界

您可以将 html 和 body 或您的 wrapper 设置为

var height = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

请记住，每次调整大小时都需要更新它！

window.innerHeight 允许您获取浏览器视图内部的实际高度（没有浏览器栏）。您可以在栏可见时实现内容的高度，甚至在它隐藏时（向下滑动）。

就我而言：
1. 通过 CSS 将 body 设置为 100vh。
不幸的是，vh 忽略了浏览器栏，这在现代浏览器的移动设备上造成了一些麻烦，这些浏览器在滚动时/之后隐藏了栏。看看at。

这也是我对上述问题的解决方案。

2.通过JS用规定的函数计算出准确的高度。每次调整大小时更新！
=> 网站的内容现在被限制在视图的内部。

在移动设备上：
安卓 7.1.1/ 铬 61.0 iOS 9.3.5/ Safari

=> 现在浏览器栏不再隐藏在 scroll- 和 swipe-events 上。

记住：
只有当您不使用一些library 导致您认为您正在水平滚动但实际上正在使用 body.height 时，它才有效。

【讨论】：

【解决方案5】：

在您的页面上使用此样式代码。现在您的 chrome 网址栏将不会隐藏。它将停止滚动。

<style type="text/css">
  html, body {margin: 0; height: 100%; overflow: hidden}
</style>

【讨论】：

这对我有用，并且必须完全如上所写（例如，如果您删除了 html 标记，则它不起作用；如果您删除了溢出属性，则 URL 栏不会滚动但是烦人的下拉刷新行为仍然存在......使用overflow: hidden不仅将URL栏锁定到位，而且还阻止了下拉刷新行为）。这种风格非常适合填充屏幕高度的“全页/屏幕”用户界面（对于高度，您必须使用 100% 如上所述，使用 100vh 将不起作用）。

【解决方案6】：

如果有人仍然对隐藏地址栏有这个问题，这就是它对我的工作方式。

 html, body {
    height: 100%;
 }

 body {
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: 0 0;
        -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: scroll;
 }

 .background {
    position: fixed;
    background-image: url('...');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
 }

我尝试了很多类似的代码，但 android chrome 正在杀死我。只有这对我有用。当您在页面底部有导航时，自动隐藏栏的主要问题。

【讨论】：

【解决方案7】：

对我有用的唯一解决方案是：

将您的正文内容放入具有以下样式的包装器中：


.wrapper {
    position: absolute;
    top: 0.5px;
    left: 0;
    right: 0;
    bottom: 0.5px;
    overflow-x: hidden; /* or any other value */
    overflow-y: auto; /* or any other value */
}

半像素偏移将是不可见的，但它们会阻止浏览器将正文视为可滚动，从而防止地址栏隐藏。

【讨论】：

这个半像素解决方案结合固定位置对我有用，这是我的包装.main { position: fixed; top: 0.5px; right: 0; bottom: 0.5px; left: 0; }

【解决方案8】：

以下内容对我有用：

HTML

<body>
    <div> This is the container for all content. </div>
</body>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    ⋮
}

body > div {
    position: absolute;
    left: 0;
    top: 0;
    
    box-sizing: border-box;
    
    width: 100%;
    height: CALC(100% + 1px);
    
    overflow-x: hidden;
    overflow-y: auto;

    ⋮
}

【讨论】：

【解决方案9】：

所以问题在于，我想避免对某个元素产生滚动效果。对于我刚刚设置的这个元素：

.disable-scroll {  
     overflow-y: hidden;  
     touch-action: pan-x; 
}

它适用于 Chrome 和小米默认浏览器，但不适用于 Firefox。

【讨论】：