您在台式电脑上设计了您的网站。它看起来很棒——清晰的照片，整洁的布局，所有东西在您的24英寸显示器上都完美对齐。然后您在手机上打开它，想知道发生了什么。文字很小。图片太宽。您不得不捏合和缩放才能阅读任何内容。按钮根本无法点击。
您不是在凭空想象。您的网站在不同设备上确实看起来不同，了解原因——以及如何解决——对您的业务至关重要。
技术解释（简化版）
台式显示器通常宽1920像素。手机屏幕大约宽390像素。这几乎是5倍的差异。如果您的网站是按照为台式屏幕设计的固定宽度构建的，手机根本无法正确显示它。
有三种处理方法：
1. 固定宽度设计（老方法）
大约2012年之前构建的网站通常采用固定宽度设计——通常是960或1024像素。在台式电脑上，它们看起来不错。在手机上，浏览器会尝试将整个960像素的布局适配到390像素的屏幕上。结果是所有内容都缩小到其预期尺寸的约40%。因此导致了捏合、缩放和沮丧。
如果您的网站是在8-10多年前构建的，并且从未重新设计过，那么几乎可以肯定就是这种情况。
2. 响应式设计（现代标准）
响应式设计使用 CSS（控制网站外观的代码）根据屏幕尺寸调整布局。网站不再只有一个固定布局，而是为多种屏幕尺寸提供指令：
- 台式电脑 (1200px+): 完整布局，多列设计，大图片
- 平板电脑 (768-1199px): 布局略微简化，间距已调整
- 手机 (小于 768px): 单列布局，更大的点击目标，简化的导航
相同的网站，相同的内容 — 但经过重新排列和调整大小，以在每个设备上都能良好运行。这是当今任何商业网站的最低标准。
3. 移动优先设计（最佳方法）
移动优先设计将响应式设计推向更深层次。它不是先为桌面设计，然后再适应手机，而是首先为手机设计，然后向上扩展以适应更大的屏幕。这确保了移动体验——您的绝大多数访客都在这里——获得主要关注。
这对您的业务为何重要
根据 Statista 的数据，2022 年第一季度，移动设备约占全球网站流量的 58.99%。对于本地服务搜索，BrightLocal 报告称 64% 的消费者使用智能手机。
如果您的网站在手机上无法正常运行，您就是在为绝大多数访客提供糟糕的体验。而“糟糕的体验”直接等同于“失去客户”。
但这不仅仅是用户体验的问题。自 2021 年 3 月以来，Google 已对所有网站采用移动优先索引。Google 在决定您的排名时，主要评估您网站的移动版本。如果您的移动网站存在问题——布局损坏、文字过小、元素过于紧密——Google 会在所有设备的搜索排名中对您进行惩罚。
常见的移动问题及其原因
文字太小，难以阅读
在手机上显示的固定宽度网站上，桌面端舒适的 16px 正文文本实际上会显示为 6-7px。Google 在 Search Console 中明确将小于 16px 的文本标记为移动可用性问题。解决方案是响应式字体大小调整，它会根据屏幕宽度进行调整。
点击目标过于紧密
导航链接、按钮和可点击元素在触摸屏上需要足够的间距。Google 建议点击目标至少为 48x48 CSS 像素，并且它们之间至少有 8 像素的间距。当链接过于紧密时，用户会不小心点击错误的链接——或者完全放弃。
水平滚动
如果您在手机上必须横向滚动才能查看网站内容，那就有问题了。这通常是由宽度固定且超出屏幕宽度的图片或元素引起的。现代 CSS 使用相对单位（百分比、视口宽度）而不是固定像素宽度来防止这种情况。
移动端内容隐藏或缺失
一些较旧的响应式设计只是在移动端隐藏内容以使其适应。这是一种不好的做法。如果内容足够重要以至于出现在桌面网站上，那么它也应该在移动端可访问——只是重新组织以适应较小的屏幕。
移动网络连接加载缓慢
即使网站在移动端看起来正常，通过蜂窝网络连接加载也可能需要太长时间。移动优化网站提供适当大小的图片，最小化 JavaScript，并使用延迟加载，以确保即使在较慢的连接上也能实现快速性能。
如何检查您的移动体验
有几种方法可以评估您的移动体验：
- 只需使用您的手机。 在手机上打开您的网站并尝试使用它。您无需放大即可阅读文本吗？您可以轻松点击按钮吗？它加载速度快吗？您可以找到您的电话号码并一键拨打吗？
- Google 的移动设备适合性测试： 访问 search.google.com/test/mobile-friendly 并输入您的 URL。Google 会告诉您您的页面是否通过了其移动设备适合性标准，并标记出任何问题。
- PageSpeed Insights: 访问 pagespeed.web.dev 并输入您的 URL。选择“Mobile”选项卡。您将获得详细的性能分数和特定移动问题的列表。
- Chrome 开发者工具： 在桌面版 Google Chrome 浏览器中，按 F12 打开开发者工具。点击设备图标以切换到手机大小的视口，查看您的网站在不同设备上的显示效果。
忽视移动端的代价
糟糕的移动端体验会给您带来以下实际损失：
- 访客流失： 根据 Google/Ipsos 的研究，61% 的移动端访客不太可能再次访问他们难以访问的网站。
- 信任流失： 根据同一项 Google/Ipsos 研究，48% 的用户表示，如果一个网站在移动设备上运行不佳，他们会认为这表明该企业不关心客户。
- 排名流失： Google 会明确降低对移动设备不友好的网站在搜索结果中的排名。
- 潜在客户流失： 如果您的电话号码在移动设备上无法点击拨打，您就指望客户手动将您的号码输入拨号器。大多数人不会费这个劲——他们会直接拨打下一个搜索结果。
良好的移动端体验是怎样的
当潜在客户通过手机访问您的网站时，体验应该是这样的：
- 页面在2秒内加载完成
- 他们立即看到您的公司名称、业务范围以及联系方式
- 文字大而易读，无需缩放
- “立即致电”按钮无需滚动即可看到
- 他们可以滚动浏览您的服务、查看客户评价和工作照片
- 一切都只需轻触一下——无需捏合、缩放或寻找
- 联系表格易于通过手机键盘填写
这就是您竞争对手的网站应该呈现的样子，也是您的网站需要呈现的样子。如果不是这样，您就会将客户拱手让给那些已经明白这一点的承包商。
好消息是：拥有一个移动友好的网站比以往任何时候都更容易、更便宜。坏消息是：您每等待一天，就意味着又一天潜在客户的流失。您的客户现在就在手机上搜索您提供的服务。确保他们找到的内容值得他们花费时间。