📱 用 Web 写移动端页面？这 7 个细节你踩了吗？
“明明我已经用 rem、用 media query，怎么页面还是奇奇怪怪的？”
很多朋友觉得“移动端适配 = viewport + flex + rem”，但当你真的用 Web 技术写 H5 页面、嵌入 WebView，或者搞 Hybrid App，就会发现：
真正决定体验的，是那些你以为没事的小细节。****
✅ 我总结了 7 个关键点，分享给你
1. ✅ 设置 viewport 别只写
initial-scale=1
推荐使用：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
防止用户双指放大 + 页面抖动。
2. ✅ iOS 下禁用 input 聚焦自动缩放
input, textarea {
font-size: 16px; /* 避免 iOS 自动放大小于 16px 的输入框 */
}
3. ✅ 注意 iOS 安全区域（Safe Area）
padding-bottom: env(safe-area-inset-bottom);
在刘海屏、全面屏手机上特别重要，避免内容被遮挡。
4. ✅
100vh
在 iOS 上其实不是 100%！
如果你用：
height: 100vh;
在 iOS Safari 里会被工具栏压缩，建议用 JS 动态计算：
document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px');
然后用：
height: calc(var(--vh) * 100);
5. ✅ 虚拟键盘弹起后页面布局错乱？
加这个：
input:focus {
scroll-margin-bottom: 120px;
}
或者用 JS 滚动到目标区域，适配 Android 低版本。
6. ✅ 触摸事件建议加上
touch-action
touch-action: manipulation;
可以提高点击响应速度，避免双击放大行为。
7. ✅ 多语言下注意文案换行/溢出问题
别忘了为按钮和标题加上：
word-break: break-word;
white-space: normal;
并尽量用 min-width, max-width 控制响应式。
✨ 项目实战场景（欢迎参考我的项目）
我在做的几个项目就踩了不少：
- 🕒 ixiu：macOS 提醒器，兼容浏览器通知特性
- ⚙️ 正在构建的 Hybrid 移动端 WebView 项目
- 📱 使用 React + Tailwind 构建移动 H5 页面，兼容 Android 8
🧩 适合这些人看：
- 做 H5 项目经常出问题的前端
- Hybrid App 开发中出现兼容性 bug 的同学
- 想从“写网页”进阶到“适配移动端” 的开发者
✅ 最后总结
移动端 Web 开发最怕的不是写不出来，而是：
页面你看着没问题，但用户体验拉满 bug。
这些细节可能看着简单，但踩坑的时候都很要命。
欢迎点赞 + 收藏，这篇我自己都当 Checklist 用 🧾
有兴趣我可以继续写一篇《移动端调试工具推荐 + iOS 快速预览技巧》。
