一个做化工原料的客户让我帮忙看个怪现象：他们的联系页在手机上会出现一条横向滚动条，来回晃，其余页面都正常。我打开一看，罪魁祸首是页脚上方那块嵌入的地图——电脑上嵌的是八百像素宽的固定尺寸，手机屏幕装不下，整页就被它撑宽了。客户苦笑：这地图还是当年做网站时免费送的。免费的往往最贵，维护和适配的账都在后面等着。
嵌入组件是页面里的编外人员
网页主体是你自己的代码，怎么适配都可控；嵌入组件是外来户——地图、视频、表单、在线客服窗口，各自带着固定尺寸和自己的脚本进来，不会自动适应你的页面。响应式网站设计里，约束这些编外人员是必修课：给它们一个宽度跟屏幕走的容器，内部内容随容器缩放。地图这类的适配其实不难，难在很多人不知道要管，就让它一直野着。
地图嵌入的正确姿势
- 宽度弹性、高度固定：宽度占满容器，高度给个三百到四百像素，任何屏幕都不溢出；
- 按需加载：地图脚本不轻，别让它拖累页面打开速度，显示个静态占位图，客户点一下再加载真实地图；
- 留个文字出口：地址写成可复制的文字，配一键导航按钮，有人不想在网页里拖地图，只想复制地址去自己的地图软件；
- 别劫持滑动：手机上往下滑页面经过地图时，别被地图的缩放手势卡住，体验会很怪。
同样的思路适用于所有嵌入件：在线客服窗口检查手机端弹出位置是否挡住关闭按钮；第三方表单嵌入后测一遍手机上的填写体验；统计代码、聊天代码定期清理，不用的就删。每多一个嵌入件，多一份适配责任，装之前先问一句：手机上它长什么样？这个问题问出口，能拦掉八成的适配事故。
一圈排查，十分钟的事
手机把全站过一遍，专找横向滚动条，出现了就说明某个组件没圈住，逐页定位。定位到具体组件后，先圈住再优化，别急着删，多数嵌入件留着有价值。联系页、首页底部的地图和客服是重点嫌疑对象。修复成本通常半天以内，却直接决定联系页这个转化末端干不干净。联系页是客户下决心的最后一站，这里乱了，前面的努力全打折。
建议把全站嵌入组件列个清单，逐个标注手机端表现，有问题的这周清完。以后每次新装第三方组件，先在手机上试完再正式上线。比格网络做响应式网站设计，所有嵌入件都有适配验收这一步——页面是个整体，一个编外人员失守，全站的体面跟着打折。把嵌入件当自己人管，页面才是一个完整的整体，这句是多年维修经验换来的。
