[英]How to hide a mobile browser's address bar?
移动设备上的 Safari 和 Chrome 在页面加载时都包含一个可见的地址栏。 当页面body滚动时，这些浏览器会将地址栏滚动到屏幕外，为网站提供更多空间，如下图所示：
我的网站允许这样做时遇到了一些问题。 我正在制作一个 Pokedex，其中包含很长的所有 Pokemon 列表。 但是，按照我设置页面的方式，它不想将地址栏滚动到看不见的地方。
我的 html 看起来像：
<body>
<app> <!-- My Angular2 tag for the app, no special styles for this -->
<nav>...</nav> <!-- The red nav bar and hamburger menu, default bootstrap -->
<div class="fluid-container">...</div> <!-- The container for all pokemon entries -->
</app>
</body>
如果我滚动到列表的绝对底部（即 721 个条目），则更多滚动会将地址栏移出屏幕顶部。 如果我触摸导航栏并将其向上拖动，则地址栏会移出屏幕。 这两种方法似乎都不直观。
我想我可以通过某种方式使用 javascript 滚动页面的主体来隐藏它，但是到目前为止我尝试过的方法不起作用。 当我这样做时，没有发生可见的滚动。
如何在页面加载后不久滚动页面以隐藏移动浏览器的地址栏？
编辑：我对此研究得越多，如果没有用户交互，它似乎就越不可能做到。 如果我需要用户交互，用户在屏幕中央的触摸是否有可能在尝试滚动包含所有条目的 div 之前首先尝试滚动主体？ 如果这像我想的那样工作，那么它会在滑动列表之前先将地址栏滑开。 这有点与默认浏览器行为相反，因此它可能不可能/容易/可靠，但我愿意尝试看看是否有人有任何想法。
我知道这是旧的，但我必须在这里添加它..
虽然这不是一个完整的答案，但它是一个“除了”
如果您不使用 https，地址栏不会消失。
也
如果您使用 https 并且地址栏仍然不会隐藏，则您的网页中可能存在一些 https 错误（例如从非 https 位置提供的某些图像。）
希望这有帮助..
看看这个 HTML5 摇滚帖子 - http://www.html5rocks.com/en/mobile/fullscreen/基本上你可以使用 JS，或者 Fullscreen API（更好的选择 IMO）或者在头部添加一些元数据来表明该页面是一个 webapp
这应该是隐藏地址栏所需的代码：
window.addEventListener("load",function() {
setTimeout(function(){
// This hides the address bar:
window.scrollTo(0, 1);
}, 0);
});
顺便说一下，图鉴也很好看！ 希望这有帮助！
就我而言，问题出在 css 和 html 布局中。 布局类似于 html - body - root - ... html并且body是overflow: hidden ， root是position: fixed, height: 100vh 。
移动设备上的此布局浏览器选项卡不会隐藏。 为了解决这个问题，我删除了overflow: hidden from html和body并删除了position: fixed , height: 100vh from root 。
存档隐藏在页面滚动中的浏览器地址栏的最简单方法是将"display": "standalone",添加到manifest.json文件中。
当用户允许时，您可以全屏显示:)
<button id="goFS">Go fullscreen</button>
<script>
var goFS = document.getElementById("goFS");
goFS.addEventListener("click", function() {
const elem = document.documentElement;
if (elem.requestFullscreen) {elem.requestFullscreen()}
}, false);
</script>
创建主机文件 = manifest.json
html标签头
<link rel="manifest" href="/manifest.json">
档案
清单文件
{
"name": "news",
"short_name": "news",
"description": "des news application day",
"categories": [
"news",
"business"
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone",
"orientation": "natural",
"lang": "fa",
"dir": "rtl",
"start_url": "/?application=true",
"gcm_sender_id": "482941778795",
"DO_NOT_CHANGE_GCM_SENDER_ID": "Do not change the GCM Sender ID",
"icons": [
{
"src": "https://s100.divarcdn.com/static/thewall-assets/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://s100.divarcdn.com/static/thewall-assets/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"related_applications": [
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=ir.divar"
}
],
"prefer_related_applications": true
}
在铬最新。 添加以下 css 滚动时自动隐藏地址栏（网址栏）！
html { height: 100vh; }
body { height: 100%; }
这就是为什么： https : //developers.google.com/web/updates/2016/12/url-bar-resizing
希望有帮助！
在 React 中隐藏移动浏览器的地址栏（IOS / Android）
[英]Hide mobile browser's address bar on load (IOS / Android) in React
如何在移动浏览器中隐藏方向更改时隐藏浏览器地址栏？
[英]How to hide the browser address bar on orientation change in mobile browsers?
如何隐藏移动网络上的地址栏，如chrome或android浏览器？
[英]How to hide the address bar on a mobile web such as chrome or android browser?
通过移动浏览器打开时如何隐藏响应式Web应用程序的地址栏？
[英]How to hide Address bar of a responsive webapp when opening through mobile browser?
如何使用整页 iframe 在页面上隐藏移动浏览器地址栏
[英]How to hide mobile browser address bar on page with full-page iframe
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.