如何在Chrome浏览器(Android版)平板电脑中隐藏工具栏，以获得100％高的网站 [英] How to hide the toolbar in Chrome for Android tablets for a 100% high website

问题描述

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

I am trying to make a web application that is 100% of the screen width and 100% of the screen height, with a 16:9 aspect ratio. It would be awesome if I would be able to view this website fullscreen on my tablet, but unfortunately the on-screen toolbar takes up a large amount of space, making my website display neither in full height nor in full width:

现在我知道，从最近开始，就可以通过向下滚动页面来隐藏滚动条(

Now I know that since recently, it is possible to hide the scrollbar by scrolling the page down (source). However, since my web application is 100% high, I am unable to hide the toolbar this way.

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

I was wondering whether anybody had another idea as to how I would be able to hide the toolbar. A CSS-only (or perhaps some HTML meta tag unknown to me) method is preferred, but I will settle for a technique using JavaScript as well.

推荐答案

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

In the end I fixed the problem by adding the possibility to scroll to my document. I positioned the body element fixed so that I am now able to hide the toolbar by swiping up but not moving any content. I admit it's a bit of a hack.

html {
    padding-bottom: 1000px;
}

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

这篇关于如何在Chrome浏览器(Android版)平板电脑中隐藏工具栏，以获得100％高的网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！