调整网址栏大小

David Bokan

从版本 56 开始,Android 版 Chrome 中网址栏的大小调整行为将发生变化。须知信息:

在视口单元中定义的长度(即 vh)不会随着网址栏的显示或隐藏而调整大小。取而代之的是,vh 单元的大小将调整为视口高度,就好像网址栏始终处于隐藏状态一样。也就是说,vh 单位的大小将调整为“可能的最大视口”。这意味着,在显示网址栏显示时,100vh 将大于可见高度。

初始包含块 (ICB) 是在相对于其父项调整元素大小时使用的根包含块。例如,为 <html> 元素指定样式 width: 100%; height: 100% 将使其大小与 ICB 相同。此项变更生效后,隐藏网址栏时 ICB 不会调整大小。 而是会保持相同的高度,就好像网址栏一直显示(“可能的最小视口”)。这意味着,当网址栏处于隐藏状态时,大小为 ICB 高度的元素将不会完全填满可见高度。

上述更改有一个例外情况,那就是针对 position: fixed 的元素。其行为保持不变。也就是说,包含块为 ICB 的 position: fixed 元素将调整大小,以响应网址栏的显示或隐藏。例如,如果其高度为 100%,则无论网址栏是否显示,它始终会完全填满可见高度。同样,对于 vh 长度,它们也会调整大小,以匹配可见高度(将网址栏位置考虑在内)。

导致这种变化的原因有以下几种:

  • 在移动设备上可用。vh 台。以前,使用 vh 单元意味着,每当用户更改滚动方向时,页面都会出现异常重排。

  • 改善了用户体验。如果页面在用户阅读时重排,他们可能会在文档中的相对位置丢失。这令人失望,但重新布局和绘制页面时还会产生额外的处理器使用量和电量消耗。

  • 改进了与 iOS 上 Safari 的互操作性。新模式应与 Safari 的行为方式一致,让 Web 开发者的工作更轻松。将 vh 单位设置为可能的最大视口但将 ICB 设置为最小的视口是一种不直观的选择,这是为了匹配 Safari 的行为。

对于网址栏锁定为隐藏状态的全屏场景,ICB 将使用全屏高度。这与上述定义一致,因为“可能的最小视口”将是完整的视口,因为滚动时网址栏不会显示。

演示

  • 以下为演示。页面右侧的四个栏是可滚动页面上提供的 99%99vhposition:fixedposition:absolute 的所有可能组合。隐藏网址栏会显示每个网址栏受到的影响。Resize 事件会输出到页面的下方。

支持

  • Android 版 Chrome 56。