关于javascript:如何在Android平板电脑的Chrome浏览器中隐藏工具栏,以获取100%高的网站

How to hide the toolbar in Chrome for Android tablets for a 100% high website

我正在尝试制作一个Web应用程序,该应用程序的屏幕宽高比为100%,屏幕高度为100%,宽高比为16:9。如果能够在平板电脑上全屏查看此网站,那就太棒了,但是不幸的是,屏幕上的工具栏占用了大量空间,使我的网站无法全屏显示或全屏显示:

web

现在我知道,自最近以来,就可以通过向下滚动页面来隐藏滚动条(源)。但是,由于我的Web应用程序高度为100%,因此无法以这种方式隐藏工具栏。

我想知道是否有人对我如何能够隐藏工具栏有另一个想法。首选仅使用CSS的方法(或者可能是一些我不知道的HTML meta标签),但是我也会选择使用JavaScript的技术。


最后,我通过添加滚动到文档的可能性解决了该问题。我固定了body元素,以便现在可以向上滑动但不移动任何内容来隐藏工具栏。我承认这有点骇人听闻。

1
2
3
4
5
6
7
8
9
10
11
html {
    padding-bottom: 1000px;
}

body {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

这是一个JS选项,可以解决您的问题。
https://github.com/scottjehl/Hide-Address-Bar/blob/master/hide-address-bar.js