移动端视图下页面顶部导航区域出现多余空白问题求助

问题结论 #

该问题和导航栏的代码布局逻辑有直接关系，同时也和移动端视口的基础配置有关，具体成因和修复方案如下：

成因分析 #

1. 缺少移动端视口配置
   绝大多数移动端浏览器默认会采用虚拟视口渲染页面（默认宽度通常为980px），如果页面<head>中没有配置正确的viewport元标签，就会出现布局错位、顶部空白的问题，桌面端DevTools如果未开启严格的移动端视口模拟，就会出现无法复现的情况。
2. 全局默认边距未清除
   浏览器默认会给body元素设置8px的外边距，部分移动端浏览器的默认边距规则和桌面端不同，如果没有做全局样式重置，就会产生多余的顶部空白。
3. 导航布局逻辑存在缺陷
   当前导航混用了flex布局、绝对定位、浮动三种对齐逻辑，很容易出现渲染异常：

• nav设置了height: fit-content，但内部的.nav-center、.nav-right都用了绝对定位，脱离了正常文档流，移动端视口变窄时，导航菜单元素换行撑开导航高度，绝对定位元素的位置计算就会出现偏移
• .nav-right设置了right: -100px，导致元素横向溢出导航区域，叠加nav的overflow: hidden属性，部分移动端浏览器会给溢出内容预留空白占位，最终出现遮挡导航栏的空白区域。

修复方案 #

1. 在HTML的<head>标签中加入视口配置：

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

其中viewport-fit=cover用于适配刘海屏设备的安全区域，避免系统预留顶部空白。
2. 增加全局样式重置，清除浏览器默认边距：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  overflow-x: hidden;
}

3. 调整导航布局逻辑，删掉绝对定位和浮动属性，直接用flex布局实现左中右对齐，避免定位偏移问题：

/* 删掉.nav-center和.nav-right原有的position、float、transform相关属性，替换为以下样式 */
nav .mainMenu {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}
.nav-right {
  margin-right: 20px;
}

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