前端 - 移动端浏览器高度与地址工具栏关系详解？
移动端浏览器高度与地址工具栏的关系？
有点不知道怎么描述，下面是简单的测试代码
<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的话一开始不可以滚动，但是一些操作后也可以做到，可是我看的一个网站可以及时的修正这个高度，不知道是什么属性做到的（难道是一开始记住高度然后赋值么（==））我的需求是达到不可滚动的效果，不过我现在想知道怎么掌控这种关系，求大佬指教
共有3个答案
一行代码修复100vhBUG
大型、小型和动态视口单元
可以使用 dvh、svh 之类的值。
具体可以参考我的这个问答 移动端 body 高度为100vh 时，实际高度超过了视窗高度。
在移动端浏览器中，地址栏和其他工具栏的高度确实会影响页面的可视高度，这取决于浏览器的实现和用户的交互行为。例如，当用户滚动页面时，一些浏览器可能会隐藏地址栏以增加可视区域的高度。
100vh 是一个 CSS 单位，表示视口（viewport）的 100% 高度。但请注意，这个单位包括了地址栏和其他工具栏的高度，所以当这些部分被隐藏时，100vh 的值会改变。
window.innerHeight 是一个 JavaScript 属性，它返回浏览器窗口的视口（包括滚动条，但不包括工具栏和滚动条）的高度（以像素为单位）。这个值会随着浏览器窗口大小的改变而改变，但通常不包括地址栏和其他工具栏的高度。
要达到不可滚动的效果，并处理地址栏和工具栏的高度变化，你可以考虑以下几种方法：
- 使用固定高度：如果你知道目标设备的屏幕高度（例如，你的例子中提到的 707px），你可以将容器的高度设置为这个固定值。这样，即使地址栏被隐藏，容器的高度也不会改变。但这种方法可能不适用于所有设备和浏览器。
- 监听窗口大小变化：使用 JavaScript 监听
resize事件，当窗口大小变化时调整容器的高度。这样，你可以确保容器的高度始终与可视区域的高度相匹配。 - 使用 CSS 的
env()函数：CSS 的env()函数可以让你访问一些环境变量，其中safe-area-inset-top和safe-area-inset-bottom可以用来考虑设备的安全区域（例如，刘海屏、圆角屏幕等）。虽然这些变量通常用于处理设备的物理特性，但在某些情况下，它们也可以用于处理地址栏和工具栏的高度。
例如，你可以尝试以下 CSS 代码：
.container { height: env(safe-area-inset-top, env(safe-area-inset-bottom, 100vh));}这段代码将容器的高度设置为视口的高度（100vh），但会考虑设备的安全区域。如果地址栏或工具栏被隐藏，容器的高度将不会改变。
请注意，由于浏览器和设备的差异，处理这种情况可能需要一些试验和调整。同时，考虑到用户体验和可访问性，确保你的解决方案在所有情况下都能提供良好的用户体验是非常重要的。
-
本文向大家介绍移动端WebApp隐藏地址栏的方法，包括了移动端WebApp隐藏地址栏的方法的使用技巧和注意事项，需要的朋友参考一下 1、很多资料说，添加以下代码,可以隐藏地址栏，但我试了很多次，貌似不成功啊。 2、我们可以通过另一种方法来隐藏地址栏。在页面加载完成之后滚动窗口，这个确实有效，唯一要注意的是页面高度必须够高，核心代码如下: 3、但是当页面高度自适应窗口（height:100%），以上
-
我想改变地址栏的颜色为网站，这是建立与Gatsby.js。 我所想到的只是修改了“gatsby-config.js”中的“sitemetadata”部分。有意义吗？在这里输入图像描述
-
本文向大家介绍js判断浏览器的环境（pc端，移动端，还是微信浏览器），包括了js判断浏览器的环境（pc端，移动端，还是微信浏览器）的使用技巧和注意事项，需要的朋友参考一下 今天突然看到一段很好的代码，分享给大家，顺便也给自己留个笔记，js判断浏览器的环境具体如下： 方法一： 方法二：这个方法摘自：im.qq.com 判断是否为微信客户端： 代码1 代码2 判断微信浏览器是PC端还是手机端，以及手机
-
问题内容： 我必须隐藏浏览器的地址栏。我正在使用此代码： 在许多解决方案中，仅location=no属性可以隐藏地址栏（在IE和Chrome中）。但是，这对我不起作用（即使在IE和Chrome中也是如此）。 最后，我找到了一条MSDN文章，其中描述了如何location=no简单地隐藏后退/前进/停止导航按钮，并使地址栏为只读。 有什么解决方案可以通过忽略上面的MSDN文章来隐藏整个地址栏吗？ 我
-
问题描述：一个web项目中，使用了minio文件服务。前端直传文件到minio上，是公共可上传和访问的。如何使用nginx配置，是用户在web系统中可以访问文件，但是退出登录后，不能在访问这个文件地址了呢？
-
问题内容： 我想让主体具有浏览器高度的100％。我可以使用CSS吗？ 我尝试设置，但不起作用。 我想为页面设置背景色以填充整个浏览器窗口，但是如果页面内容很少，我将在底部看到一个难看的白色条。 问题答案： 尝试将html元素的高度也设置为100％。 Body向其父级（HTML）寻求如何缩放动态属性，因此HTML元素也需要设置其高度。 但是，身体的内容可能需要动态更改。将最小高度设置为100％将实现