如何在所有移动设备上扩展您的网站

最成功的网站在设计时都采用了移动优先的方法。以下是如何构建一致的用户体验。

and old computer and a new computer, representing migration to new software or hardware

图片来源

Opensource.com

我们大多数人使用移动设备上网、在线购物，甚至支付账单，因为它们方便且易于访问。根据 Forrester 研究报告 The Digital Business Imperative，在美国，43% 的银行客户在三个月内使用手机完成银行交易。

通过移动设备完成的在线业务交易逐年显著增长，这鼓励公司构建网站和电子商务网站，使其在计算机和智能移动设备上的外观、感觉和功能完全相同。然而，许多用户仍然发现，在智能手机上浏览网站的体验与在计算机上不同。为了开发能够在不同设备上有效且流畅地扩展的网站，了解造成这些跨平台差异的原因非常重要。

网页通常由以下一个或多个组件组成：页眉和页脚、主要内容（文本）、图像、表单、视频和表格。设备在屏幕尺寸（长 x 宽）、屏幕分辨率（像素密度）、计算能力（CPU 和内存）和操作系统（iOS、Android、Windows 等）等功能上有所不同。这些差异对跨不同设备的图像、视频和文本等 Web 组件的整体性能和渲染产生重大影响。另一个重要因素是移动用户可能并不总是连接到高速网络，因此应仔细设计网页，使其在低带宽连接下也能有效工作。

移动平台上最麻烦的问题

以下是一些可能影响网站在各种设备上的性能和可扩展性的最常见问题

站点无法自动适应不同的屏幕尺寸。 一些网站被设计为适应可变的屏幕尺寸，但它们的元素可能不会自动缩放。这将导致站点自动调整自身以适应各种屏幕尺寸，但站点中的元素在较小的设备上可能看起来太大。有些站点可能未被设计为适应可变的屏幕尺寸，导致元素在屏幕较小的设备上看起来非常小。
站点的内容对于移动设备来说太多了。 一些网站加载了大量内容以填充桌面屏幕上的空白空间。在开发网站时未考虑移动用户通常属于此类。这些站点需要更多的时间和带宽来加载，并且如果页面未针对移动设备进行适当设计，则某些内容甚至可能不会出现。
站点加载图像的时间太长。 包含过多图像或大型图像文件的网站很可能需要很长时间才能加载，尤其是在设计阶段未优化图像的情况下。
表格中的数据看起来很复杂且加载时间太长。 许多网站以表格形式呈现数据（例如，竞争产品的比较、来自不同旅游网站的机票数据、航班时刻表等），并且在移动设备上，这些表格可能加载缓慢且难以理解。
网站托管的视频无法在某些设备上播放。 并非所有移动设备都支持所有视频格式。一些网站托管的媒体需要许可证、Adobe Flash 或其他某些移动设备可能不支持的播放器。这会导致挫败感和糟糕的整体用户体验。

设计您的站点以适应不同的设备

所有这些问题都可以通过适当的设计和采用移动优先方法来解决。当处理屏幕尺寸、带宽等限制时，请关注内容的正确数量和质量。移动优先策略将内容作为主要对象，并为最小的设备进行设计，确保站点仅包含最基本的功能。首先解决移动设备的设计挑战，然后逐步增强针对更大设备的设计。

以下是在设计需要在不同设备上扩展的网站时需要考虑的一些最佳实践。

适应任何屏幕尺寸。至少，网页需要缩放以适应任何移动设备的屏幕尺寸。今天的移动设备配备了非常高的屏幕分辨率。移动设备上的像素密度远高于桌面屏幕，因此务必格式化页面以匹配设备无关像素的移动屏幕宽度。HTML 文档中包含的“meta viewport”标记满足了这一要求。

如上所示的 meta viewport 值有助于格式化整个 HTML 页面并渲染内容以匹配任何屏幕尺寸。

“内容为王。” 内容应决定网站的设计，反之亦然。包含过多元素（如表格、表单、图表等）的网站在需要在移动设备上扩展时会变得具有挑战性。开发人员最终会为移动用户隐藏内容，桌面版本和移动版本变得不一致。设计应侧重于核心结构和内容，而不是装饰元素。移动优先方法确保桌面用户和移动用户使用单一版本的内容，因此 Web 设计人员应仔细考虑、制作和优化内容，使其不仅满足业务目标，而且还吸引移动用户。移动版本中未显示的内容甚至可能不需要在桌面版本中显示。
响应式图像。设计应考虑在信号强度较弱的区域运行的小型手持设备。大型照片和复杂图形不适合在这种条件下运行的移动设备。确保所有图像都针对不同的视口大小和像素密度进行了优化。推荐的方法是分辨率切换，这使浏览器能够根据设备的屏幕尺寸选择适当大小的图像文件。分辨率切换使用两个属性 - srcset 和 sizes（如下面的代码片段所示）- 这使浏览器能够使用设备宽度来选择 sizes 列表中提供的最合适的媒体条件，根据该条件选择插槽大小，并加载 srcset 中引用的最接近所选插槽大小的图像。

例如，如果视口为 320px 的设备加载页面，则 sizes 列表中的媒体条件 (max-width: 320px) 将为真，并且将选择相应的 280px 插槽。srcset 中列出的第一个图像 (elephant-320w.jpg) 的宽度最接近此插槽。不支持分辨率切换的浏览器将 src 属性中列出的图像显示为默认图像。这种方法不仅为您的设备视口选择了正确的图像，而且还防止加载不必要的大型图像，从而消耗大量带宽。

响应式表格。 随着世界变得越来越数据驱动，将关键的、时间敏感的数据带到手持设备为用户提供了力量和自由。挑战在于以一种易于在移动设备上加载和阅读的方式呈现数据。某些数据需要以表格形式呈现，但当数据表格变得太大和笨拙时，用户在小屏幕移动设备上解释它们可能会感到沮丧。例如，如果屏幕比表格的宽度窄得多，则用户被迫缩小，使文本太小而无法阅读。相反，如果屏幕比表格宽，则用户必须放大才能查看数据，这需要不断地垂直和水平滚动。

幸运的是，有几种构建响应式表格的方法。这是最有效的方法之一
- 表格的列被转置为行。每列的大小都调整为与屏幕相同的宽度，从而避免了水平滚动的需要。颜色的使用有助于用户清楚地区分每行数据。在这种情况下，对于每个“单元格”，应使用 CSS 生成的内容 (:before) 来应用标签，以便可以清楚地识别每条数据。
- 另一种方法是根据屏幕宽度以两种格式之一显示数据：图表格式（用于窄屏幕）或完整表格格式（用于宽屏幕）。如果用户想要单击图表以查看完整表格，则可以使用上述方法以表格形式显示数据。( :before )
- 第三种方法是在窄屏幕中显示一个迷你图形，以指示表格的存在。用户可以单击图形以展开并显示表格。
始终播放的视频。 如果视频文件的格式不受支持或需要专有视频播放器，则通常无法在移动设备上播放。推荐的方法是为视频和动画使用标准 HTML5 标签。HTML5 中的 video 元素可用于加载、解码和播放网站上的视频。生成多种格式的视频以适应不同的移动平台，并确保适当地调整视频大小，使其在其容器内播放。

下面的示例显示了使用标签来指定不同的视频格式（由 type 元素指示）。在这种方法中，切换到正确格式发生在客户端，并且仅向服务器发出一个请求。这减少了网络延迟，并使浏览器无需先下载即可选择最合适的视频格式。

video 元素的 videoWidth 和 videoHeight 属性有助于识别视频的编码大小。可以使用 JavaScript 或 CSS 控制视频尺寸。max-width: 100% 有助于调整视频大小以适合屏幕。CSS 媒体查询可用于根据视口尺寸设置大小。还有几个 JavaScript 库和插件可以保持视频的纵横比和大小。