桌面端看着完美的页面，一到手机上就问题百出：边框变粗、输入框被键盘挡住、按钮点不准、点击有 300ms 延迟……这些都是移动端适配的"经典坑"。本篇整理尧图建站团队在数百个项目里反复遇到的移动端问题，给出可直接复用的解决方案。

一、1px 边框与高清屏适配

在 Retina 等高清屏上，CSS 的 1px 边框往往显得偏粗。原因是设备像素比（DPR）大于 1，1 个 CSS 像素对应多个物理像素。最稳的方案是用伪元素 + transform: scaleY() 绘制真正的 0.5px 物理边框。

/* 0.5px 物理边框（下边框为例） */
.border-bottom {
  position: relative;
}
.border-bottom::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--line);
  transform: scaleY(0.5);
  transform-origin: 0 100%;
}

原理是先画一个 1px 高的伪元素，再用 scaleY(0.5) 在垂直方向缩放一半，物理像素就是 0.5px，视觉上纤细锐利。四条边框同理，用 scale(0.5) 配合 transform-origin 即可。相比 border: 0.5px 这种兼容性差的写法，伪元素方案在所有主流机型上都稳定。

二、软键盘遮挡与输入体验

手机上点击底部输入框时，弹出的软键盘常把输入框完全遮住。解决思路是监听输入框的 focus 事件，用 scrollIntoView 把它滚动到可视区。同时要避免用 position: fixed 固定底部栏，因为 iOS 下 fixed 元素在键盘弹出时定位会错乱。

// 输入框聚焦时滚动到可视区
const inputs = document.querySelectorAll('input,textarea');
inputs.forEach(el => {
  el.addEventListener('focus', () => {
    setTimeout(() => el.scrollIntoView({ block: 'center' }), 300);
  });
});

另外，移动端表单要善用 HTML5 输入类型：type="tel" 唤起数字键盘、type="email" 调出带 @ 符号的键盘、inputmode="numeric" 在需要纯数字时更友好。这些小细节能显著提升用户的输入效率，减少表单放弃率。

三、点击区域与触摸优化

苹果官方建议可点击元素的最小触摸尺寸是 44×44px，小于这个尺寸手指容易点空。很多企业官网的导航链接字号小、间距窄，手机上极难点中。解决方法是给链接增加 padding 扩大点击区，或用伪元素扩展可点击范围。

/* 扩展点击区域，不改变视觉大小 */
.nav-link {
  position: relative;
  padding: 12px 8px;  /* 扩大内边距 */
}
/* 或用伪元素扩展热区 */
.nav-link::before {
  content: "";
  position: absolute;
  inset: -10px;  /* 向外扩展 10px 热区 */
}

还有两个高频问题值得注意。第一，移动端点击会有约 300ms 延迟（浏览器等待判断是否双击缩放），现代浏览器在设置了 width=device-width 的 viewport 后已基本消除，但加上 touch-action: manipulation 可确保禁用双击缩放延迟。第二，iOS 输入框默认有灰色高亮，用 -webkit-tap-highlight-color: transparent 清除，保持视觉一致。

* {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

把这些细节落实到每个项目里，企业官网的移动端体验就能从"能用"提升到"好用"。移动端适配没有银弹，靠的就是对每个细节的较真。