当前位置:   article > 正文

html隐藏地址栏,javascript – 如何隐藏移动浏览器的地址栏?

如何让自己的html页面在手机浏览器中隐藏浏览器的ui

移动设备上的Safari和Chrome都会在页面加载时包含可见的地址栏.当页面正文滚动时,这些浏览器会在屏幕上滚动地址栏,为网站提供更多的空间,如下图所示:

XxJYY.png

我的网站允许这个问题,我遇到了一些问题.我正在制作一个Pokedex,其中包含很长的所有口袋妖怪列表.但是,通过我设置页面的方式,它不希望将地址栏滚动到视线之外.

2nKb4.png

我的HTML看起来像:

...

...

如果我滚动到列表的绝对底部(即721个条目),则再滚动会将地址栏移动到屏幕顶部.如果我触摸导航栏并将其向上拖动,则地址栏将移出屏幕.这两种方法似乎都不直观.

我想有一些方法我使用javascript滚动页面的主体将隐藏它但what I’ve tried so far不起作用.当我这样做时,没有发生可见的滚动.

如何在页面加载后立即滚动页面以隐藏移动浏览器的地址栏?

编辑:我越是研究这个,没有用户交互就越不可能做到这一点.如果我需要用户交互,用户在屏幕中心的触摸是否可能首先尝试滚动主体,然后尝试滚动包含其中所有条目的div?如果按照我想的方式工作,那么它会先滑动地址栏,然后再滑过列表.这与默认的浏览器行为相反,所以它可能不可能/简单/可靠,但我愿意尝试看看是否有任何想法.

解决方法:

我知道这是旧的,但我必须在这里添加..

虽然这不是一个完整的答案,但这是一个’补充’

如果您不使用https,地址栏不会消失.

如果您使用的是https且地址栏仍然无法隐藏,则您的网页可能会出现一些https错误(例如某些图片是从非https位置投放的.)

希望这可以帮助..

标签:javascript,mobile-browser,address-bar

来源: https://codeday.me/bug/20190926/1818940.html

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/321464
推荐阅读
相关标签
  

闽ICP备14008679号