从 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%
、99vh
、position:fixed
和position:absolute
的所有可能组合。隐藏网址栏后,您可以查看这对各个元素的影响。系统会在页面下方输出大小调整事件。
支持
- Android 版 Chrome 56。