移动端底部导航栏仅桌面调试可见真机不显示问题求助

解决方案 #

• 优先检查HTML头部的viewport配置
  绝大多数桌面调试正常、真机失效的适配问题都是缺失viewport元标签导致的，移动端浏览器会默认以980px宽度渲染页面，无法触发你设置的max-width:480px媒体查询。请确认<head>标签内存在如下配置：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  

• 调整移动端导航的默认样式优先级
  你当前仅在移动端媒体查询内给.menu-on-mobile设置了display:flex，需要先确认全局样式中该类的默认值是否为display:none，如果全局样式的display:none带了!important标记，请给媒体查询内的display:flex也加上!important提升权重，避免被全局样式覆盖：

  .menu-on-mobile {
    display: flex !important;
    /* 其余原有样式 */
  }
  

• 调整媒体查询断点适配更多设备
  目前部分中高端安卓手机、折叠屏手机的竖屏逻辑宽度已经超过480px，可以将断点调整为max-width: 768px，覆盖绝大多数移动端设备场景。
• 适配iOS底部安全区
  苹果移动端Safari对底部fixed定位的元素有安全区限制，未适配的话元素可能会被挤出可视区域，修改padding配置即可适配：

  .menu-on-mobile {
    padding: 15px 15px calc(15px + env(safe-area-inset-bottom)) 15px;
    /* 其余原有样式 */
  }
  

• 检查父元素样式限制
  请排查.menu-on-mobile的所有祖先元素，是否存在overflow: hidden、transform等属性，这类属性会导致fixed定位的元素相对于父元素渲染，而非视口，最终超出可视区域被隐藏。

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