如何隐藏Chrome for Android平板电脑中的工具栏,以获得100%的高分辨率网站

Question

我正在尝试制作一个100%的屏幕宽度和100%的屏幕高度,宽高比为16:9的Web应用程序.如果我能在平板电脑上全屏查看这个网站会很棒,但不幸的是屏幕工具栏会占用大量空间,使我的网站既不显示全高也不显示全宽:

现在我知道,从最近开始,可以通过向下滚动页面来隐藏滚动条(源代码).但是,由于我的Web应用程序是100%高,我无法以这种方式隐藏工具栏.

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

Answer 1

最后,我通过添加滚动到我的文档的可能性来解决问题.我将body元素定位为固定,这样我现在可以通过向上滑动隐藏工具栏但不移动任何内容.我承认这有点像黑客.

html {
    padding-bottom: 1000px;
}

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