简体   繁体   English

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

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

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

Web应用程序未显示全屏

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. 但是,由于我的Web应用程序是100%高,我无法以这种方式隐藏工具栏。

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. 我只选择一个CSS(或者可能是某些我不知道的HTML元标记)方法,但我也会选择使用JavaScript的技术。

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. 我将body元素定位为固定,这样我现在可以通过向上滑动隐藏工具栏但不移动任何内容。 I admit it's a bit of a hack. 我承认这有点像黑客。

html {
    padding-bottom: 1000px;
}

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

Here is a JS option that might solve your issue. 这是一个可以解决您的问题的JS选项。 https://github.com/scottjehl/Hide-Address-Bar/blob/master/hide-address-bar.js https://github.com/scottjehl/Hide-Address-Bar/blob/master/hide-address-bar.js

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM