手机端的流量占比一般都在70%左右，所以官网上移动端的加载速度、布局以及交互细节都会直接影响到咨询量以及搜索引擎排名。很多网站已经运行了很多年了，在电脑上看起来非常整齐，但是到了手机上就会出现字体太小、横屏滑动、点击位置不准确等问题。下面就来谈谈如何对企业的官方网站进行移动端适配检测和优化的一些方法。
如何开始检测
不能仅仅依靠眼睛去看，要按照“数据-环境-页面”的顺序来进行。
从后台的数据来看，移动端的跳出率、平均停留时间和页面浏览深度都低于桌面端。如果移动端的跳出率达到15%以上的话，那么基本上就可以确定是体验上的问题了，要逐个页面去检查。
再确认一下测试环境：Chrome开发者工具中的设备模拟只能用来初步筛选，微信自带的浏览器、iOS Safari以及各个安卓浏览器的渲染效果不同，需要用真实的手机去验证。同一个页面在微信中字体偏大、弹出层被键盘挡住、固定元素位置不对等等问题都经常出现。
最后要做的就是对每一个重要的环节进行逐一审核：主页、产品介绍页、解决方案页、成功案例页以及联系方式页等，在转化路径上出现的页面要先查一遍，其他的页面则随机抽取一些来检查。
经常会出现的一些问题
- 缺少viewport声明或者声明错误。如果没有viewport meta标签的话，浏览器就会按照桌面尺寸来显示，并且整体缩小字体大小，使文字变得非常小。正确的做法应该是加入width=device-width和initial-scale=1这两个属性，并且不能设置最大缩放比例来阻止用户放大页面，在无障碍访问方面也需要允许用户进行放大操作。
- 使用固定的像素宽度来布局，页面被设置为1200px，在手机上会出现横向滚动的问题。改成用百分比或者flex、grid等方式进行布局，并且加上媒体查询，在768px和1024px处改变列的数量；对于表格类的内容加一个可以水平滚动的容器，防止页面过大而溢出。
- 字号和点击区域不符合要求，正文小于14px会导致阅读困难，应该改成15-16px，行间距大约为1.6。按钮、链接的点击面积如果小于44×44像素的话就容易发生误触的情况了，所以图标按钮要增加一些内边距。
- 弹窗和悬浮层会挡住内容。客服对话框、优惠券弹窗、Cookie提醒等都会占据第一屏的空间，在移动设备的第一屏空间本来就比较狭小的情况下被遮挡的话就会大大增加跳出率。悬浮元素的高度应该有所限制，并且可以关闭，不能和底部导航栏发生重叠。
- 表单交互不好用，输入框没有设置好类型（比如电话、邮箱等），在手机上不能弹出相应的键盘；必填项提示信息不清楚；提交之后没有反馈。字段尽量少一些，手机号码、公司名称和用途这三个就可以了。
- 没有进行适配和压缩处理，原始图片大小为3兆字节，在移动网络上加载速度很慢。按照显示尺寸输出，首选WebP格式，并配有不同分辨率的图片供选择，除了第一屏之外的所有图片都采用懒加载的方式加载。
- 跳转判断出现错误的话，在利用UA来识别设备并且进行到独立的移动版本的时候，逻辑不够严密就会造成桌面端被错误地跳转、跳转循环或者搜索引擎爬虫无法抓取到移动版的情况。robots屏蔽了移动版目录、canonical全部指向桌面版都会对收录和权重传递产生影响。
- 兼容性和安全性方面的问题仍然存在：如果页面中仍然使用了http协议的话就会出现混合内容警告；地图、视频以及客服脚本所依赖的第三方服务在某些环境下无法被加载出来，需要进行降级处理；iOS上的100vh和键盘弹出造成的布局跳动问题可以用dvh或者动态计算高度来解决。
选择最优路线
响应式设计和独立的移动版本两种方案的选择主要看站点的结构情况。对于内容更新快、页面多的企业网站来说，采用响应式的维护费用比较低，一套代码可以适用于多种设备，并且不会出现跳转以及权重分散的问题。而对于历史负担较重或者老站点改造风险较大的情况，则可以先做独立移动版，但是要确保内容一致、双向链接正确无误、canonical和alternate标记清楚，在站长平台上提交适配关系。
速度优化所指向的目标
手机端对速度更加重视，在首屏3秒之内展现主要内容就是基本要求了。常用的方法有：启用Gzip或者Brotli压缩、给静态资源加上缓存头、把图片和字体放到CDN上、对字体进行子集化处理、合并并且延迟加载不重要的脚本、重要的CSS直接嵌入、减少第三方统计和广告代码的数量等。主要的技术指标可以参考LCP、CLS、INP，其中CLS主要因为图片没有设置宽高或者字体加载时出现文字抖动造成的。
上线之后的验证速度
完成修改之后，用抓包工具来验证抓取到的移动版内容是否完好无损，并且要检查结构化数据和页面标题是否随着不同平台而改变，在比较改动前后移动端的跳出率以及咨询转化率的基础上，建议保留两周以上的观察期，以防一次数据的异常导致错误的判断。每三个月对重要的页面进行一次审查，因为浏览器版本、设备屏幕比例的变化速度很快，去年的适配方案在今年可能就不再适用了。
企业网站移动端适配不是一蹴而就的事情，在发现问题之后要进行优化再测试，并且根据数据不断调整，这样才能达到良好的效果。做好viewport、布局、字号、图片和表单等基本的东西，让速度保持在合理的范围内，移动端的搜索和咨询量也会有所提升。