一个有点挑战性的css问题

Question

移动web设置页面高度100vh，在一些浏览器里是正常显示的，但是在某些可以全屏的移动浏览器，比如手机端的chrome，估计100vh和height:100%都是包括上边地址栏的高度的，所以设置了100vh还是可以拖动页面然后隐藏标题栏然后显示的才是全屏的？我想要它不能拖动而且显示的是全部内容的（用vue写的单页应用，设置了背景等内容，希望能获得app的体验）。
曾经尝试过将html和body都设置了height:100,overflow:hidden,然后页面div设置height:100%，但是发现它的确是不能滚动了，但是发现页面下面一部分被隐藏了...
有没有什么解决方法吗？

Answer 1

可以尝试使用fullscreenapi来实现全屏幕操作Titlebody{padding:0;margin:0;width:100vw;height:100vh;background-color:red;}.divBottom{position:absolute;left:0px;bottom:0px;width:100vw;height:100px;background-color:greenyellow;}HTMLElement.prototype.requestFullscreen=HTMLElement.prototype.requestFullscreen||HTMLElement.prototype.webkitRequestFullscreen;document.querySelector("body").addEventListener("click",function(){this.requestFullscreen();},false);