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