URL 栏调整大小
作者：互联网
由 大卫·博坎 David 是 Web Fundamentals的贡献者
从 56 版开始，Android 版 Chrome 中 URL 栏的大小调整行为发生了变化。以下是您应该了解的内容：
以视口单位（即vh）定义的长度不会随着 URL 栏的显示或隐藏而调整大小。相反，vh单位的大小将与视口高度一致，就好像 URL 栏总是隐藏一样。也就是说，vh单位将被调整为“最大可能的视口”。这意味着100vh将大于显示 URL 栏时的可见高度。
初始包含块 (ICB) 是在相对于其父元素调整元素大小时使用的根包含块。例如，给<html> 元素一个样式width: 100%; height: 100%将使它的大小与 ICB 相同。通过此更改，当 URL 栏隐藏时，ICB 将不会调整大小。相反，它将保持相同的高度，就好像 URL 栏始终显示一样（“最小可能的视口”）。这意味着当 URL 栏隐藏时，大小为 ICB 高度的元素不会完全填充可见高度。
上述更改有一个例外，那就是对于 position: fixed. 他们的行为保持不变。也就是说，position: fixed包含块为 ICB的元素将响应 URL 栏的显示或隐藏而调整大小。例如，如果它的高度为100%，它将始终准确地填充可见高度，无论 URL 栏是否显示。与vh长度类似， 考虑到 URL 栏位置，它们也会调整大小以匹配可见高度。
这种变化有几个原因：
-
vh手机上的可用单位。在此之前，使用vh单位意味着每次用户更改滚动方向时页面都会重排。 -
改进了用户体验。如果页面在用户阅读时重排，他们可能会丢失他们在文档中的相对位置。这令人沮丧，但也会导致额外的处理器使用和电池消耗来重新布局和重新绘制页面。
-
改进了与 iOS 上的 Safari 的互操作性。新模型应该与 Safari 的行为方式相匹配，让 Web 开发人员的工作更轻松。使
vh单元尽可能大而 ICB 尽可能最小的不直观选择是匹配 Safari 的行为。
对于 URL 栏锁定为隐藏状态的全屏场景，ICB 将使用全屏高度。这与上面的定义一致，因为“最小可能的视口”将是完整的视口，因为 URL 栏不会在滚动时显示。
演示
- 这是一个演示。在页面右侧的四个酒吧的所有可能的组合
99%，99vh，position:fixed并position:absolute提供一个可滚动页面上。隐藏 URL 栏显示它如何影响每个。调整大小事件打印在页面下方。
支持
- Android 上的 Chrome 56。
https://developers.google.com/web/updates/2016/12/url-bar-resizing
标签：URL,ICB,vh,视口,大小,页面,调整 来源： https://blog.csdn.net/qq_40481849/article/details/121729929