移动端适配：资深站长踩过的坑与实用指南
上周帮一个老客户改网站，流量掉了快40%。查了半天，从关键词排名查到外链，从服务器查到页面速度，最后才发现问题出在哪。
他的站还是2015年做的，整个页面是固定1200px宽度，扔到移动端就是整体缩小，按钮小到连我这种年轻人都要戳两三下才能点中。
去年百度谷歌都更新了移动端体验的评分规则，这种站直接被降了权。
说实话，现在还有很多人觉得移动端适配就是个小问题，套个模板就完事了。
真不是。
别被概念绕晕，移动端适配核心就是三个问题
很多新手一搜适配，出来一堆流式、响应式、自适应、rem、vw，看得头都大了。
剥开这些概念，你要解决的其实就三件事。
第一，不同尺寸屏幕都能正常显示内容。从5寸的小屏手机，到12寸的折叠屏平板，不能字挤在一起，也不能空白一大片。
第二，符合移动端的交互习惯。你不能用pc端的hover悬浮点击，不能做只有10px宽的按钮，不能让用户一直放大缩小看内容。
第三，符合搜索引擎的规则。现在不管百度还是Google，全都是移动端优先索引，适配不合格，直接不给好排名。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/f9c6df6d-7e57-4e06-872a-6173c6bd07b3.jpg
移动端适配不同屏幕尺寸对比图
三种主流适配方案，不同站点选不同路子
目前市面上用的最多的就是三种，我给你掰扯清楚优缺点，你对着自己的站选就行。
第一种是流式布局，全用百分比做宽度，不用固定像素。优点是写起来简单，改个模板十分钟就能搞定。缺点就是复杂布局容易乱，比如多栏布局，小屏上会挤成一团，大屏上元素又散得离谱。适合那种内容为主的博客站，就堆文字放几张图，要求不高的话用这个没问题。
第二种就是现在最火的响应式布局，配合媒体查询，给不同宽度范围设置不同的样式，断点一设，什么屏幕都能自动适配。
我做站这么多年，90%的站都用这个方案。不管是企业站还是博客站还是小型电商，都能hold住。不过话说回来，很多人做响应式犯一个错，断点只设了手机、平板、pc三个，忘了现在折叠屏普及，展开后尺寸介于平板和pc之间，打开页面直接乱套。
所以我一般会多留一个折叠屏的断点，也不麻烦，多写几行代码的事儿。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/a05e11de-0533-4821-96c8-6d79ad2d4724.jpg
移动端响应式适配断点设置参考表
第三种就是独立m站，就是做一个m.xxx.com的域名，专门放移动端内容。早年网速慢，手机性能差的时候用的多，现在很少有人这么干了。除非你是日流量百万级的电商大站，移动端要做很多定制化的功能，不然真没必要，既要维护两套代码，还要处理URL归一化的问题，稍不注意就会被搜索引擎判重复内容，得不偿失。
九成新手都会踩的隐形坑，我当年栽过大跟头
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/c6ba2125-3dc0-4cab-a0f3-39b5245b8818.jpg
九成新手都会踩的隐形坑，我当年栽过大跟头
我刚做站那会，以为把响应式一套就完事了，结果流量掉了一半，半个月才找到问题。这些坑都是隐形的，你不细看根本发现不了。
第一个坑，点击热区尺寸不够。Google官方明确要求，移动端可点击元素的热区最小不能低于 48×48dp，换算成像素大概就是14*14mm，你想想你手机上的按钮多大？很多人做导航栏的按钮，为了好看挤在一起，热区只有20多px，别说老年人了，我手稍微抖一下都点错。用户体验差，搜索引擎直接给你打低分。
第二个坑，viewport设置错误。很多模板自带的viewport代码，要么没写width=device-width，要么加了user-scalable=no，不让用户放大缩小。现在的无障碍标准里，允许用户缩放是硬性要求，你禁了缩放，视力不好的用户没法看，搜索引擎也会降权。我那个老客户就是这个问题，他的模板加了user-scalable=no，直接被扣了分。
第三个坑，全屏弹窗挡内容。很多站长为了涨粉，一打开站就是一个全屏的关注公众号弹窗，遮了整个内容，连关闭按钮都小的找不到。Google早在2017年就出了规则，这种遮挡主体内容的弹窗，直接降低排名。别抱着侥幸心理，现在搜索引擎抓这个抓的准得很。
第四个坑，图片没适配。很多人直接把pc端1920宽度的原图放到移动端，加载慢不说，还浪费用户流量。现在都要做响应式图片，用srcset给不同分辨率的设备放不同尺寸的图，不光加载快，还能提页面速度得分，一举两得。
我见过太多做SEO的，天天蹲在站长工具里看指数看外链，花大价钱买友情链接，转头就把这种核心的基础问题给忽略了。
搜索引擎的规则说穿了就是给用户好的体验，你移动端连点都点不开，内容都看不全，凭什么给你好排名？
反正这些坑我都踩过，钱也花过，流量也掉过，写出来给你提个醒。
多花半天时间检查一下，比你折腾一个月外链有用多了。 楼主态度很认真，回复也很耐心，这样的楼主值得大家支持。 这个问题困扰我很久了，看了你的帖子终于有思路了，非常感谢。 很多细节都考虑到了，看得出来是真正懂行的人在认真分享。 虽然有些地方不太懂，但整体看完还是收获很多，慢慢消化一下。 楼主分析得很到位，很多地方都很实用，已经默默收藏起来慢慢看。 观点很成熟，分析也很理性，值得大家静下心来认真看一看。 感谢楼主愿意花时间分享，让我们这些后来者能少踩很多坑。 经验很宝贵，尤其是亲身实践过的总结，比网上随便找的靠谱多了。 讲得很透彻，把复杂的问题简单化，理解起来轻松了很多。 讨论氛围很好，大家都在理性交流，这样的论坛环境太舒服了。 认真看完了整篇内容，感觉受益匪浅，期待楼主后续更多优质的分享。 逻辑严谨，条理分明，一看就是经过认真思考和整理的内容。 内容写得很详细，逻辑也很清晰，对新手来说非常友好，支持一下楼主。 楼主考虑得很全面，不仅讲了方法，还提到了注意事项，非常贴心。 思路很清晰，步骤也很详细，跟着操作应该不会出什么问题。 非常有建设性的意见，对解决实际问题有很大的参考意义。
很多建议都很接地气，能直接用在生活或工作中，实用性很强。
页:
[1]
2