H5 页面在手机上的 8 个常见适配问题

H5 页面在电脑上调得好好的，一到手机上就各种小问题。下面是我做移动端页面时最常遇到的 8 个，基本每个项目都会碰上。

1. 没有 viewport，页面缩成一团

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

viewport-fit=cover 是为了配合下面第 3 条的安全区域处理。不建议加 user-scalable=no 禁止缩放，这对视力不好的用户很不友好。

2. iOS 上点击输入框，页面自动放大

当输入框的字号小于 16px 时，iOS Safari 会在聚焦时自动放大页面，而且失焦后不会缩回去。

解决办法很简单：输入框字号设为 16px。

input, textarea, select { font-size: 16px; }

3. 底部按钮被刘海屏 / 底部横条挡住

使用 env() 读取安全区域：

.bottom-bar {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

前提是 viewport 里设置了 viewport-fit=cover。

4. 100vh 比实际屏幕高

手机浏览器的地址栏会伸缩，100vh 按地址栏收起时的高度计算，导致页面底部被遮住一截。现在可以用新的视口单位：

.full { height: 100vh; height: 100dvh; }

先写 100vh 作为不支持 dvh 的旧浏览器的兜底。

5. 1px 边框看起来很粗

在高分屏上，CSS 的 1px 对应 2 到 3 个物理像素。如果设计稿要求极细的线，可以用缩放：

.hairline { position: relative; }
.hairline::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-bottom: 1px solid #e5e5e5;
  transform: scaleY(0.5);
  transform-origin: bottom;
}

说实话，大多数情况下直接用 1px 加一个浅一点的颜色，视觉效果就已经足够了。

6. 横向滚动条莫名出现

通常是某个元素宽度超出了屏幕，比如长链接、长单词、代码块或者宽表格。排查时可以临时加一行：

* { outline: 1px solid red; }

找到元素后，文字用 word-break: break-word，代码块和表格用 overflow-x: auto 包起来。

7. 软键盘弹出后，fixed 底部栏位置错乱

键盘弹出时，iOS 不会改变布局视口，position: fixed 的底部栏可能被顶到奇怪的位置。比较稳妥的做法是：表单页面不放 fixed 底部栏，提交按钮跟随内容流排在表单末尾。

8. 横滑区域的滚动条很难看

分类标签这种横向滑动的区域，可以隐藏滚动条：

.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

调试建议

• 浏览器的手机模拟只能发现布局问题，键盘、安全区域、地址栏伸缩这些一定要用真机测；
• iPhone 连上 Mac 后，可以用 Safari 的「开发」菜单直接调试手机上的页面；
• 安卓手机开启 USB 调试后，可以在电脑 Chrome 里打开 chrome://inspect 进行调试。