明明电脑上看网站挺正常，一用手机打开就乱套 —— 文字挤成一团、图片显示不全、按钮点半天没反应，访客唰唰地走，排名怎么也上不去。新手如何快速做好移动端适配，让手机用户愿意留下来？别担心！小编帮开美妆店的小吴做过适配，她原来的网站在手机上根本没法看，改了之后 15 天，移动端排名就涨了 20 多位。今天就把简单又实用的适配方法拆解开，保证新手也能学会，一起往下看吧！
一、先搞懂：移动端适配差，为啥会影响排名？
可能有人会说：“手机上看着别扭怎么了？能打开不就行了？” 那可不行哦。现在用手机搜东西的人，比用电脑的多得多，搜索引擎肯定更照顾手机用户体验好的网站。如果你的网站在手机上没法看，就算内容再好，排名也上不去。小吴一开始没在意，后来发现 70% 的访客都用手机，才赶紧做适配。
1. 适配差会让访客 “秒退”
手机用户没耐心，打开网站 3 秒内没加载好，或者看着费劲，马上就会关掉。小吴原来的网站加载要 5 秒，适配后压到 2 秒内，访客停留时间从 10 秒涨到了 40 秒。
2. 搜索引擎会 “降权”
搜索引擎有专门的移动端爬虫，会模拟手机用户浏览。如果爬虫发现网站在手机上显示有问题，就会觉得这个网站体验差，排名自然不会高。
二、最简单的适配方法：用 “响应式设计”，一次做好俩端
可能有人会问：“适配是不是要做两个网站，一个电脑一个手机？” 不用那么麻烦。现在最常用的是 “响应式设计”，就是一个网站能自动适应不同屏幕，电脑、手机、平板打开都好看。小吴的网站就是用这个方法，花的钱比做两个网站少多了。
1. 找模板时认准 “响应式”
如果是用建站模板做的网站，选模板时看清楚有没有 “响应式” 标签。这种模板会自动调整布局，手机上文字不会太小，图片也不会出格。小吴原来用的是非响应式模板，换了之后手机端立马清爽了。
2. 重点检查这 3 个地方
- 文字大小：手机上文字不能小于 14 号，不然看着费眼。小吴把产品介绍文字从 12 号调到 15 号，反馈好多了。
- 按钮大小：点击按钮至少要有拇指那么大，太小吃不到。把 “加入购物车” 按钮调大后，点击量涨了 30%。
- 图片尺寸：别用太大的图片，不然加载慢。小吴用压缩工具把图片压小，加载速度快了一半。
| 检查项 | 错误做法 | 正确做法 |
|---|---|---|
| 文字大小 | 12 号字，看不清 | 14-16 号字，清晰易读 |
| 按钮大小 | 1 厘米见方，难点击 | 2 厘米见方，方便触摸 |
| 图片尺寸 | 2MB 大图，加载慢 | 200KB 以内，清晰又快 |
三、自己能做的小调整：不用代码也能改
如果暂时没法换模板，也能自己做些小调整，先改善一下体验。小吴在换模板前，就靠这些方法救了急。
1. 删掉 “电脑端专用元素”
手机屏幕小，像电脑上的侧边栏、大横幅广告，在手机上会占地方，直接删掉或者隐藏。小吴把侧边栏的促销信息挪到页面底部，看着就不乱了。
2. 用 “单列布局” 展示内容
别在手机上搞多列排版，文字和图片从上到下排成一列，用户往下滑着看最舒服。小吴把产品列表从三列改成一列，手机用户说 “看着清楚多了”。
3. 测试时用 “手机实际预览”
别只在电脑上看模拟效果，拿自己的手机打开网站看看。多试几个品牌的手机，安卓和苹果都看看，有时候不同手机显示会不一样。小吴就是用自己的手机试，才发现图片在苹果上显示正常，在安卓上有点偏暗，调了亮度就好了。
后半段自问自答：适配后多久能看到排名变化？
有人可能会问：“我改好了适配，排名多久能涨？” 小吴是第 10 天开始有变化，第 15 天明显看到排名上升。不过这也看网站原来的基础，如果原来排名就不错，只是适配差，改完后可能一周就有效果；如果原来问题比较多，可能要等两周。
还有人问：“一定要花钱做响应式吗？” 如果预算有限，先做些简单调整也行，比如调文字大小、压缩图片，总比不管强。小吴一开始没换模板，就靠手动调整，排名也涨了一点，后来换了模板涨得更快。
小编觉得，移动端适配现在真的太重要了，毕竟大部分人都用手机上网。新手不用怕，先从简单的调整开始，比如检查文字大小、压缩图片，这些自己就能做。要是觉得麻烦，找个响应式模板，一次到位更省心。小吴现在移动端的订单比电脑端还多，她说 “早知道适配这么重要，一开始就该做好”。希望你也能赶紧把适配做好，让手机用户愿意留下来，排名自然就上去了。
