调整网址栏大小

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 的所有可能组合。隐藏网址栏会显示它对各个网址栏的影响。调整事件大小会输出到页面下方。

支持

  • Android 版 Chrome 56。