Html 在移动设备浏览器中隐藏地址栏

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5855969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:21:29  来源:igfitidea点击:

Hide address bar in mobile device browser

htmlcssmobile-safarimobile-website

提问by Prabhat

I know 1 way of doing this.

我知道这样做的 1 种方法。

<body onload="setTimeout(function() {window.scrollTo(0, 1)}, 100)">
...
</body>

But this works only if the page is big enough to be scrolled. If the page fits the screen the above function wont work. How to hide the address bar in this case ? I need to get it to work with iphone, ipad, android devices.

但这只有在页面足够大可以滚动时才有效。如果页面适合屏幕,则上述功能将不起作用。在这种情况下如何隐藏地址栏?我需要让它在 iphone、ipad、android 设备上工作。

采纳答案by Tom Claus

Maybe you can set the minheight on the body bigger. 480pxscreen height in vertical mode + 60pxaddress bar height = 540px.

也许您可以将 body 上的 minheight 设置得更大。垂直模式下480 像素屏幕高度 + 60 像素地址栏高度 = 540 像素。

Example:

例子:

body { min-height:540px; }     
body[orient="portrait"] { min-height:540px; }
body[orient="landscape"] { min-height:400px; }

回答by sanderd

iPhone:

苹果手机:

Works only if the mobile "app" is added to the homescreen (through the plus-icon -> add to homescreen)

仅当移动“应用程序”添加到主屏幕时才有效(通过加号图标 -> 添加到主屏幕)

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

I have no experience with other mobile OS'es, but a quick Google-search for hide browser url bar androidresulted in a similar solution to yours, with a window.scrollTo.

我没有使用其他移动操作系统的经验,但是通过 Google 快速搜索隐藏浏览器 url bar android得到了与您类似的解决方案,带有 window.scrollTo。

回答by petter

from http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/I found

http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/我发现

function hideAddressBar() {
  if(!window.location.hash) {
    if(document.height < window.outerHeight)
      document.body.style.height = (window.outerHeight + 50) + 'px';
    setTimeout( function(){ 
        window.scrollTo(0, 1); 
        document.body.style.height = 'auto'; 
      }, 50 );
  }
}

A bit modified

有点修改

works quite well in some browsers, but at least I cannot get it to work Android Chrome.

在某些浏览器中运行良好,但至少我无法让它在 Android Chrome 中运行。

回答by Amir

Just Add 'BR' at the end of the page. or you can use the jqueryUI with the div height 100%

只需BR在页面末尾添加“ ”。或者您可以将 jqueryUI 与div height 100%