移动端浏览器高度与地址工具栏关系详解?-灵析社区

Fronttend

移动端浏览器高度与地址工具栏的关系? 有点不知道怎么描述,下面是简单的测试代码 body, html { margin: 0; } .container { width: 100%; height: 100vh; background: linear-gradient(to bottom, #000, #e5e5e5); font-size: 30px; color: lightblue; border: 1px solid red; box-sizing: border-box; } const container = document.querySelector(".container"); container.innnerText = `${window.innerHeight}`; // container.style.height = `${window.innerHeight - 1}px`; setInterval(() => { container.innerText = window.innerHeight; }, 1000); 就是移动端浏览器正常打开是有地址栏,主视区和工具栏三块嘛,然后我手机主视区高度是707,如果用100vh的话浏览器就可以向上滚动然后浏览器会隐藏地址栏(这时候就变成767了)(有的浏览器还会隐藏工具栏),用innerHeight的话一开始不可以滚动,但是一些操作后也可以做到,可是我看的一个网站可以及时的修正这个高度,不知道是什么属性做到的(难道是一开始记住高度然后赋值么(==))我的需求是达到不可滚动的效果,不过我现在想知道怎么掌控这种关系,求大佬指教

阅读量:130

点赞量:0

问AI
可以使用 "dvh"、"svh" 之类的值。 具体可以参考我的这个问答 "移动端 body 高度为100vh 时,实际高度超过了视窗高度。" (https://segmentfault.com/q/1010000020155101#1020000044034717)