手机网页/H5 接客服，和 PC 网页有啥不一样

先说结论：一份代码两端用

H5、手机网页，说到底还是网页。接美洽用的就是 PC 上那同一段代码，贴在页面底部同一个位置，不需要给手机单独准备一份。客服组件自己会识别屏幕大小，在手机上换成适合小屏的样式，气泡和会话窗都不会顶出屏幕。

所以「要不要专门做个移动版客服」这个问题，答案是不用。你要做的，是确认手机上的几处细节没毛病。

顺一句，要是你们 PC 站和手机站本来就是响应式的同一套页面，那这篇看完第一段就可以收工了，剩下的步骤是给两套站点分开维护的团队准备的。

跟着做

1. 如果 PC 站和手机站是同一套页面，代码已经贴过的话，这步直接跳过，本来就生效。
2. 如果手机站是独立的另一套（比如单独的 m 站），去「设置 → 渠道管理 → 网页」把同一段代码再贴进手机站的公共模板。
3. 拿真机打开页面，别只用电脑模拟器，看气泡出不出来、点开顺不顺。
4. 用访客身份在手机上发一条消息，回工作台确认收发正常。

手机上要多留意的三处

• 视口设置：页面头部的 viewport 标记得正常，缺了它整个页面布局会怪，客服窗也可能跟着显示异常。
• 层级遮挡：手机上常见的固定底栏、回到顶部按钮、优惠券浮层，都可能和聊天气泡叠在一起打架。撞上了就调一下层级，或者给气泡挪个位置。
• 加载速度：移动网络比 WiFi 慢，代码继续放页面底部让它异步加载，别拖慢首屏。

公众号里打开的 H5 要注意

如果这个页面是在微信里打开的，接法还是那一套，但多两个变量。一个是微信内置浏览器的兼容性，表现可能和外部浏览器不完全一样；另一个是只要涉及获取用户头像昵称这类信息，就受微信授权规则的约束，不是想拿就能拿。

微信里出问题时，把同一个链接丢到手机自带浏览器里打开对比。外面正常、微信里异常，那问题出在微信环境；两边都异常，就回到代码和缓存上查。具体兼容表现以微信平台规则和美洽官方的文档为准。