调整网址栏大小

David Bokan

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

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

初始容器块 (ICB) 是相对于其父元素调整元素大小时使用的根容器块。例如,为 <html> 元素设置 width: 100%; height: 100% 样式会使其与 ICB 的大小相同。进行这项更改后,当网址栏处于隐藏状态时,ICB 不会调整大小。而是会保持相同的高度,就像网址栏始终显示一样(“尽可能小的视口”)。这意味着,在网址栏处于隐藏状态时,大小与 ICB 高度相同的元素不会完全填满可见高度。

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

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

  • 移动设备上可用的 vh 单元。在此之前,使用 vh 单位意味着每当用户更改滚动方向时,页面都会剧烈地重新流动。

  • 改进了用户体验。如果网页在用户阅读时重新流动,用户可能会丢失文档中的相对位置。这很令人沮丧,但也需要额外的处理器用量和电量来重新布局和重新绘制页面。

  • 改进了与 iOS 上的 Safari 之间的互操作性。新模型应与 Safari 的行为一致,让 Web 开发者更轻松地工作。之所以选择将 vh 单元设为尽可能大的视口,但将 ICB 设为尽可能小的视口,是因为这样可以与 Safari 的行为保持一致。

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

演示

  • 请参阅演示。页面右侧的四个条状标签是可滚动页面上提供的 99%99vhposition:fixedposition:absolute 的所有可能组合。隐藏网址栏后,您可以查看这对各个元素的影响。系统会在页面下方输出大小调整事件。

支持

  • Android 版 Chrome 56。