安卓移动端地址栏隐藏事件咨询及地图高度动态适配问题

核心问题解答 #

安卓浏览器滚动时地址栏自动上滑隐藏的行为，不属于标准的Fullscreen API事件。

标准的全屏事件（如fullscreenchange）是通过浏览器提供的requestFullscreen()、exitFullscreen()等API主动触发的全屏状态，而移动端浏览器的地址栏自动隐藏是浏览器自身的UI适配逻辑——为了给页面腾出更多可视空间，和Fullscreen API完全无关，所以你在桌面端用的全屏事件监听在移动端自然不会生效。

解决地图底部空白的方案 #

针对地址栏变化导致的地图高度适配问题，推荐以下两种可靠的实现方式：

1. 监听窗口尺寸与滚动事件动态调整高度

地址栏隐藏/显示会改变当前视口的有效高度，我们可以通过监听resize和scroll事件，实时计算可用视口高度并设置给地图容器：

function adjustMapHeight() {
  // 获取当前可见视口的真实高度
  const availableHeight = window.innerHeight;
  // 替换成你的地图容器ID
  const mapContainer = document.getElementById('map-container');
  // 根据布局需求调整，比如减去顶部导航栏高度等
  mapContainer.style.height = `${availableHeight}px`;
}

// 初始加载时设置一次
document.addEventListener('DOMContentLoaded', adjustMapHeight);
// 监听窗口尺寸变化
window.addEventListener('resize', adjustMapHeight);
// 监听滚动事件，处理地址栏渐变隐藏的过程
window.addEventListener('scroll', adjustMapHeight);

2. 使用CSS小视口单位（现代浏览器推荐）

部分现代移动端浏览器支持100svh单位（Small Viewport Height），它代表当前可见视口的高度（不包含被浏览器UI遮挡的部分），可以直接用CSS设置地图容器高度：

#map-container {
  height: 100svh;
}

如果需要兼容旧版浏览器，还是优先用JS动态计算的方案。

注意事项 #

• 不要给地图容器设置固定像素高度，始终基于实时视口高度做适配；
• 若页面有其他固定定位的元素（如顶部导航栏），计算高度时需要减去对应元素的高度，避免地图被遮挡或出现空白。

内容的提问来源于stack exchange，提问作者Jack