从版本 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%
、99vh
、position:fixed
和position:absolute
的所有可能组合。隐藏网址栏会显示每个网址栏受到的影响。Resize 事件会输出到页面的下方。
支持
- Android 版 Chrome 56。