iPhone Safari中底部导航按钮被系统导航栏遮挡问题求助

问题根源是iPhone Safari底部存在浏览器自带的系统导航栏，普通bottom: 0的fixed定位元素会被这个系统栏覆盖。可以通过CSS的安全区域变量实现适配：

方案一：让导航栏整体避开安全区域 #

修改后的样式代码：

#navbar_mobile_extra_links {
    position: fixed;
    left: 0;
    right: 0;
    bottom: env(safe-area-inset-bottom);
    background: #29166F;
    color: #fff;
    text-align: center;
}

方案二：导航栏背景延伸至系统栏下方，仅内容避让 #

如果希望导航栏背景填满底部（避免出现空白），可以保留bottom: 0，用内边距确保内容不被遮挡：

#navbar_mobile_extra_links {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #29166F;
    color: #fff;
    text-align: center;
    padding-bottom: env(safe-area-inset-bottom);
}

env(safe-area-inset-bottom)会自动识别设备底部安全区域的高度，在Chrome等无需适配的浏览器中，该值会自动取0，不会影响原有显示效果。

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