必须加 viewport meta 标签，否则手机端适配失效；需设 width=device-width、initial-scale=1.0，禁用 user-scalable=no；按钮热区≥44px、避免 touch-action 干扰；输入框勿用 fixed，改用 absolute + relative；微信 X5 内核需显式声明 charset、禁用 @import、JS 等 DOMContentLoaded。
手机客服页面必须用 viewport meta 吗
必须加，不加等于放弃适配。很多开发者以为只写个 width: 100% 就行，结果在 iPhone 上缩成一团、按钮点不中、字体小得看不见。
真实场景里，用户不会放大再点“在线客服”按钮——他们划两下就走了。所以 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 是硬性起点，不是可选项。
- 漏掉这行，iOS Safari 默认按 980px 渲染，再缩放，交互区域全乱
-
initial-scale=1.0要显式写，某些安卓 WebView 对缺省值处理不一致 - 别加
user-scalable=no——客服页面常需放大看订单号、截图文字，禁缩放反而增加投诉
点击按钮没反应？检查 touch-action 和 padding
PC 上好好的按钮，到手机上点十次没一次触发，大概率是 CSS 挡住了。常见错误不是 JS 绑定问题，而是浏览器根本没把这次触摸当“可点击”。
Android Chrome 和 iOS Safari 对 touch-action 很敏感，空 div、过小的热区、或父级设置了 touch-action: none 都会吞掉事件。
立即学习“前端免费学习笔记（深入）”；
- 按钮最小尺寸建议 ≥
44px（iOS 人机指南），用padding扩展热区，别只靠font-size - 避免给按钮父容器设
touch-action: pan-y或none，除非你真在做手势控制 - 用
cursor: pointer不起作用，手机端无效；改用style="touch-action: manipulation"可加速点击响应
键盘弹出后客服输入框被顶飞怎么办
安卓和 iOS 处理软键盘的方式不同：iOS 会滚动页面让输入框可见，安卓（尤其低版本）常直接把 fixed 定位的输入框切出视口，用户输不了字。
这不是 bug，是原生行为差异。硬 fix 的方案（比如监听 resize）在部分安卓机型上失效，更稳妥的是结构规避。
- 别用
position: fixed做输入框容器，改用position: absolute+bottom: 0，并确保父容器有position: relative - 输入框不要放在
overflow: hidden的滚动容器里，否则键盘弹出会触发容器重绘错位 - 测试时重点看 OPPO、vivo 的 ColorOS 和 OriginOS，它们对
input的 focus 行为拦截最激进
微信内嵌浏览器加载慢、样式错乱
微信内置 X5 内核（基于 Blink）有自己的一套解析逻辑，尤其对 @import、async 脚本、以及未声明 charset 的 CSS 文件极其敏感。
用户点开客服链接后等三秒白屏，八成不是服务器问题，是资源加载被 X5 拦了。
- CSS 文件必须在
<link>标签里加charset="utf-8"，否则中文注释或字体名可能解析失败 - 别用
@import引入样式，X5 对它支持差，且阻塞渲染；全改用<link rel="stylesheet"> - JS 初始化客服组件的代码，务必等
DOMContentLoaded，别信$(document).ready()—— 微信里 jQuery ready 有时比实际 DOM 就绪还早
最麻烦的其实是调试：X5 不支持远程调试，只能靠 console.log + 服务端日志交叉比对，或者用 vConsole 临时注入。这点很多人一开始根本没想到。
