移动端适配：safe-area与默认布局样式优化
表格组件在桌面端表现良好，但移动端存在两个突出问题：一是 iOS 刘海屏和底部指示条会遮挡内容，二是页面和表格各有各的滚动容器导致"双重滚动"——手指滑动时不知道滚动的是哪个区域。本节解决这两个问题。
iOS Safe Area 适配
viewport-fit 设置
在 index.html 的 <meta viewport> 标签中添加 viewport-fit=cover：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
html
viewport-fit=cover 让页面内容可以延伸到安全区域外（刘海、底部指示条区域），然后通过 CSS 环境变量精细控制内边距。
CSS 环境变量
/* 四个方向的 safe-area 值 */
padding-top: env(safe-area-inset-top); /* 顶部（状态栏） */
padding-right: env(safe-area-inset-right); /* 右侧（横屏刘海） */
padding-bottom: env(safe-area-inset-bottom); /* 底部（指示条） */
padding-left: env(safe-area-inset-left); /* 左侧（横屏刘海） */
css
在 Tailwind 中使用：
// tailwind.config.ts 中添加自定义 utilities
.safe-bottom {
padding-bottom: env(safe-area-inset-bottom);
}
.safe-top {
padding-top: env(safe-area-inset-top);
}
scss
双重滚动问题
问题复现
当页面容器设置了 overflow-y: auto，同时内部的 el-table 也设置了固定高度（自动产生滚动条）时，会出现：
┌──────────────────────┐
│ 页面滚动容器 │ ← 手指上滑时滚动这个
│ ┌──────────────────┐ │
│ │ 表格滚动容器 │ │ ← 还是滚动这个？
│ │ │ │
│ │ 用户不确定 │ │
│ │ 滚动的是哪个 │ │
│ └──────────────────┘ │
└──────────────────────┘
text
解决方案
原则：确保只有一个滚动容器。
方案一：表格占满剩余空间
.page-container {
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden; /* 页面不滚动 */
}
.table-container {
flex: 1;
overflow: hidden; /* 由 el-table 自己管理滚动 */
}
css
方案二：使用 overscroll-behavior
.table-container {
overscroll-behavior: contain;
/* 阻止滚动穿透到父容器 */
}
css
overscroll-behavior: contain 确保子容器滚动到边界时不会触发父容器的滚动。
真机调试配置
在 Vite 的 vite.config.ts 中设置 server.host 为 0.0.0.0，使开发服务器监听所有网络接口，移动设备可以通过局域网 IP 访问：
export default defineConfig({
server: {
host: '0.0.0.0',
port: 3000,
},
})
typescript
启动后终端会显示局域网 IP（如 http://192.168.1.100:3000），在同一网络的移动设备上打开这个地址即可调试。
本节小结
- safe-area：
viewport-fit=cover+env(safe-area-inset-*)适配 iOS 刘海屏。 - 双重滚动：确保只有一个滚动容器，使用
overflow: hidden禁用多余的滚动。 - overscroll-behavior：
contain值阻止滚动穿透。 - 真机调试：Vite 设置
host: '0.0.0.0'，移动设备通过局域网 IP 访问。
↑