2026/08/26

题主发现该问题已被处理，此帖子留档

问题现象

在手机浏览器（目前已知safari、oppo、edge、via浏览器）中打开 Toy 页面时，页面底部区域被浏览器自身的工具栏/地址栏遮挡。

对于游戏和一些页面本身不具备滚动能力的应用相当致命。

目前已知一种用户侧的解决办法：按住移动端附加的toy横幅可上拉拖动（滚动视图或展开浏览器），但这个办法很多用户并不了解，并且提高了使用负担，所以比较影响用户体验。

根因

移动端Toy 页面外层www.bilibili.com/toy/<slug>/index.html当前注入的样式是：

<style>
  html,body{margin:0;padding:0;height:100%;}
  iframe{display:block;border:0;width:100%;height:calc(100vh - 44px);}
</style>

其中 100vh 在移动浏览器中对应的是 large viewport（lvh），即浏览器工具栏收起时的最大视口高度。而浏览器工具栏显示时，真实可见高度是 small/dynamic viewport（svh/dvh），比 100vh 小一截。因此：

iframe 高度 = 100vh - 44px  >  浏览器实际可见高度 - 44px

iframe 底部一截落到浏览器工具栏后面，跑在 iframe 内部的应用也跟着被遮挡。

为什么创作者无法在自己项目里修复

1. 外层样式由 toy 平台注入，创作者改不到。

2. 外层带 !important，即使能注入也会被覆盖。

3. iframe src 是 bilibilitoy.com、外层是 bilibili.com​，跨域，iframe 内无法访问 parent.document 改外层；sandbox 虽含 allow-same-origin 但跨源不生效。

4. iframe 内部的 window.innerHeight / visualViewport.height 只反映 iframe 自身高度，感知不到外层浏览器工具栏遮挡了多少，项目侧无法动态算出准确补偿值。

复现

各位开发者可以使用自己手里的项目打开上文提到的浏览器，并查看底部是否被遮挡，同时按住横幅是否可以滚动，下方为演示：

00:15

1.3万观看 0弹幕

【已处理】Toy 页面在移动浏览器底部被工具栏/地址栏遮挡

此内容无法展示，请 重新加载

期望

把外层 iframe 高度公式从 calc(100vh - 44px) 改为基于动态视口高度（100dvh 或 --vh 变量），使 iframe 高度始终贴合浏览器当前真实可见区域，底部内容不再被工具栏遮挡。