移动端浏览器高度与地址工具栏关系详解？

作者站长头像
站长
· 阅读数 4

移动端浏览器高度与地址工具栏的关系？有点不知道怎么描述，下面是简单的测试代码


    <style>
      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;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
    <script>
      const container = document.querySelector(".container");
      container.innnerText = `${window.innerHeight}`;
    //   container.style.height = `${window.innerHeight - 1}px`;
      setInterval(() => {
        container.innerText = window.innerHeight;
      }, 1000);
    </script>
  </body>

就是移动端浏览器正常打开是有地址栏，主视区和工具栏三块嘛，然后我手机主视区高度是707，如果用100vh的话浏览器就可以向上滚动然后浏览器会隐藏地址栏（这时候就变成767了）（有的浏览器还会隐藏工具栏），用innerHeight的话一开始不可以滚动，但是一些操作后也可以做到，可是我看的一个网站可以及时的修正这个高度，不知道是什么属性做到的（难道是一开始记住高度然后赋值么（==））我的需求是达到不可滚动的效果，不过我现在想知道怎么掌控这种关系，求大佬指教

回复
1个回答
avatar
test
2024-06-19

可以使用 dvh、svh 之类的值。

具体可以参考我的这个问答 移动端 body 高度为100vh 时，实际高度超过了视窗高度。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容