iOS Safari底部地址栏上浮会遮挡网页底部元素，需用CSS env(safe-area-inset-bottom)动态留白或JavaScript监听视口变化精准调整；调试时可快速滚动隐藏地址栏验证问题。
当iOS版Safari浏览器底部地址栏自动上浮时，会直接盖住网页最下方的按钮、输入框或导航栏，导致用户无法点击或误触返回键——这不是网页代码缺陷，而是Safari视口动态收缩引发的布局错位。
用CSS环境变量让底部内容自动避开地址栏
这是前端开发者最常用且无需用户操作的方案，利用iOS原生提供的安全区变量，精准补偿地址栏高度。
在网页的
padding-bottom: env(safe-area-inset-bottom);
这行代码会让元素底部自动留出空间，高度等于当前Safari底部工具栏实际占用像素值。env(safe-area-inset-bottom)在地址栏展开时返回约44px～88px（取决于设备与系统版本），收起时返回0px，完全动态响应。
【必须确保该元素设置了box-sizing: border-box】，否则padding会额外增加总高度，造成页面滚动条异常或内容溢出。
用JavaScript监听视口变化实时调整布局
当网页含复杂交互（如键盘弹出后地址栏行为异常）、或需兼容老版本iOS（
第一步：给底部元素添加唯一class，例如<div class="fixed-bottom-nav">
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
第二步：在页面<script>中插入以下代码：
function adjustBottomSpace() {
const bottomEl = document.querySelector('.fixed-bottom-nav');
if (!bottomEl) return;
const vh = window.innerHeight;
const docHeight = document.documentElement.scrollHeight;
const isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari && docHeight > vh) {
bottomEl.style.paddingBottom = (vh - window.visualViewport.height) + 'px';
} else {
bottomEl.style.paddingBottom = '0';
}
}
window.addEventListener('resize', adjustBottomSpace);
window.addEventListener('load', adjustBottomSpace);
这段脚本通过对比documentElement.scrollHeight与window.innerHeight，判断地址栏是否处于展开状态；再结合visualViewport.height获取真实可视区域高度，精确计算遮挡量。
注意：不要用window.innerHeight直接减去固定数值（如44px），因为iPhone不同机型+不同系统版本下地址栏高度差异极大，硬编码必然失效。
临时关闭Safari底部工具栏（用户侧快速验证）
若你正在调试网页，想立刻确认是否为地址栏遮挡所致，可手动触发工具栏隐藏状态：
在Safari中打开网页 → 快速向上滚动页面到底部 → 等待约1秒 → 底部地址栏自动收起 → 此时网页底部按钮将完全可见。
这个动作不修改任何设置，仅测试当前页面渲染效果。若此时按钮可点，说明问题确由地址栏遮挡引起，应优先采用前两种开发侧方案。
