企业网站做完了，老板在电脑上看很满意，拿手机一打开，两根手指放大才看得清字，这个站等于白做。因为现在企业官网的访问里，手机端占比普遍超过六成，很多客户是扫个码、点个链接进来的。今天左左把手机端适配里容易被忽略的五个问题讲一遍，你对着自己的站检查。

适配不是把宽度设成100%就完事

有些建站的人说「我做了自适应」，实际只加了一行视口标签和宽度 100%，内容一复杂照样乱。

移动端适配的核心是三件事：视口标签写对、容器不设固定像素宽度、字号和点击区域按手机习惯调整。

视口标签要写 width=device-width, initial-scale=1。这句话的意思是不放大不缩小，按设备的实际宽度来渲染。

容器宽度用百分比或者上限宽度限制，不要写死 1200px。写死了在手机上就会出现横向滚动条。

字号方面，正文建议底部 15 到 16 像素，别低于 14。低于 14 像素，手机上看就是考验视力。

问题一：表格和长数字撑破屏幕

企业官网里经常有参数表、对比表，还有营业执照编号、电话这类长数字。

表格在手机上撑破屏幕，本质是表格内容的宽度超过了屏幕宽度。

处理方法有两种。内容不多的表格，改成卡片式排列，一行数据一个小卡片。内容多的表格，外面套一层可以横向滚动的容器，让用户自己左右滑。

长数字要加自动换行规则，比如 word-break: break-all。不然一串 18 位的统一社会信用代码会把整行顶出去。

问题二：图片没做多尺寸

电脑端放一张 1920 像素宽的头图很清晰，手机上也加载这张图，就是浪费流量，还拖慢打开速度。

正确的做法是按设备给不同尺寸的图。手机端给 750 到 828 像素宽就够了，电脑端再给大图。

如果不想做多套图，至少把图片做压缩。头图控制在 200 KB 以内，产品图控制在 100 KB 以内。

另外记得给图片加上宽度限制，写成宽度上限 100%、高度自适应。这样即便图片本身尺寸不对，也不会撑破版式。

问题三：手机号不能直接拨号

这一条非常实用。官网上的联系电话，在手机上点一下应该直接跳拨号。

做法是把电话包在链接里，前面加 tel:，比如 tel:13800000000。

同理，邮箱用 mailto:，地址用地图链接。

很多企业站把电话做成一张图片或者单纯的文字，客户想打还得手动记下来再拨，这一下就可能流失一个意向客户。

问题四：弹窗和浮层挡住内容

电脑端常见的做法是右下角挂一个在线客服浮窗，或者进站弹一次活动广告。

这两样在手机上很容易变成灾难。浮窗会挡住正文，弹窗的关闭按钮小到点不中。

我的建议是手机上默认不弹活动窗，客服浮窗做成可以收起的按钮，并且贴边、尺寸小一点。如果一定要弹，关闭按钮至少 40×40 像素，而且要放在容易点到的位置。

问题五：表单的键盘类型不对

表单在电脑上填没问题，手机上体验差，通常是因为没指定输入类型。

填手机号的输入框，要设 type="tel"，这样手机弹出来的是数字键盘。填邮箱的设 type="email"，键盘会带 @ 键。

输入框里的提示文字别用浅灰色，手机在户外看基本看不见。

还有一个细节，输入框高度不要低于 44 像素，这是手指点得中的下限。

导航和返回按钮也别漏

导航这块也常出问题。电脑端横向排开的菜单，手机上如果原样保留，要么挤成一排小字，要么直接换行乱掉。

合理的做法是收成汉堡菜单，点开是一个抽屉式的列表。菜单项不要太多，控制在 7 个以内。栏目层级深的站点，建议把重点内容提前，别让客户点三层才找到产品。

另一个细节是返回顶部和返回上一级这两个按钮。手机上的手势操作和浏览器行为不完全一致，有个明确的按钮，用户会踏实一些。

还有页面标题。手机上浏览器标签栏很窄，标题如果太长会被截断。把公司名和核心业务放在前面，比如「某某科技-小程序开发」，不要只写「首页」两个字。

上线前怎么自查

介绍一个不用装工具的检查办法。

拿一台安卓手机和一台苹果手机，各打开一遍官网。重点看四个页面：首页、产品列表页、产品详情页、联系我们页。

每个页面做四件事：横过来看有没有横向滚动条、把字号调到系统默认看能不能看清、点一遍所有按钮看是不是能点中、填一次表单看键盘对不对。

这四件事走完，大概十分钟。发现问题就把链接和截图发给做站的人，比口头描述「手机上有点乱」有效得多。

到头来，企业网站手机端适配不是额外加的功夫，是基础要求。花半天时间把上面这五点过一遍，比投广告拉来流量但留不住更划算。

关注左左，你需要一个懂技术的朋友。