领先技术

项目
01/29/2015

移动化现有网站

Dino Esposito 人们经常会遇到这样一种情境。例如，您去酒店、机场或一些其他公共场所时，在连接到本地无线网络时，将被重定向到登录页面，并输入您的凭据。登录页面在您的移动设备上显得非常小。您需要缩放屏幕，使输入表单缩放到合适的大小，然后键入凭据。

这种体验令人厌烦，但却又时常发生。并且远不止令人厌烦这么简单。不能在所有设备上良好呈现的网站的前景将会比较惨淡。如果不能为移动用户提供良好的体验，将会缩减企业的利润，因为这样会使用户不再使用这些网站，而是改用竞争对手的网站。

很多开发人员解决 Web 问题的法宝是使用自适应 Web 设计 (RWD)。RWD 确实是一种选择，但是像其他任何事物一样，它也有其优缺点。RWD 的最大问题是它需要新项目。

RWD 的基本理念是所有内容都是流动的。所有元素永远不能超出屏幕的宽度。因此，顾名思义，RWD 可以适应无数屏幕宽度。RWD 的要点是创建一个受新的内容理念启发且具有固定较少数量的断点的新网站。将 RWD 或类似于 Twitter Bootstrap 的库推送到针对桌面设备设计的现有网站几乎不可行。

另外，出售 RWD 方法比较容易。它包含一个网站、一个品牌和一个提供多个 UI 的代码库。但实现 RWD 不太容易，因为其改变了 Web 开发体验。对于网站呈现信息的方式，您必须有明确、清晰的目标。RWD 可能易于出售，但它不支持即兴发挥。内容适应并不神奇。它来自于细心周密的规划。

RWD 还改变了项目管理的统一规则，并且通常完成时所花的费用比开发普通非自适应网站高。跟踪进度的甘特图意义不大，因为所有新步骤都需要团队成员度量所有受支持视图的效果。因此，最后当无法选择自适应网站时，如何才能满足客户预期，并使他们的生活更加便捷？

添加连接的移动网站

如果您的网站可以帮助您的公司维持业务，同时在吸引、维护和服务客户方面起到重要作用，那么提供移动设备体验对留住这些用户至关重要。无需全网站重写和破坏现有功能的最简单的方法是为移动设备受众创建单独的网站。此方法称为构建移动网站。

移动网站更像本机应用程序，最有可能由正在移动的用户（正在站着、赶时间、忙碌或排队的人群）使用。要在这些情况下使用小型设备连接到网站的用户非常希望从该网站中受益。因此，该网站必须能够直接、简洁、准确、快速地加载和响应。

采用移动网站的方法比较经济，原因有两点。虽然它是一个全新的项目，但能够继承现有网站中的核心服务。通常会继承大部分业务逻辑，但这并非表示它会复制代码库。此外，移动网站通常会实现 80/20 规则。通常支持的功能不超过整个网站可用功能的 20%。当然，选择这 20% 的功能并非像公园散步那般轻松。

在规划移动网站时，您应该揣测移动的网站用户的想法。移动中的用户真正希望在您的网站上使用哪些信息？用户希望执行哪些功能？如何尽可能快速流畅地与用户进行交互？最后这个问题涉及如何充分利用 HTML5 功能。

对于一个将要在移动设备上使用的网站，当希望显示数字或日期时，很难不将输入元素的类型属性设置为数字或日期。这将显著简化键入。通过使用相同的令牌，除了类似的业务逻辑之外，还可以引用新的用例使移动用户的生活更加轻松、更加充满乐趣。

访问移动网站

由于移动网站是离散型网站，访问者应使用哪个 URL？诸如 m.yourserver.com 之类的子域是最佳选择吗？是 .mobi 顶级域名还是桌面网站下的 /移动子目录效果更好？m. 子域比 .mobi 域更易于管理，因为前者只是子域，而非新的域名。目录可能更容易出错，因为这表示移动网站将托管在与桌面网站相同的应用程序下。这可能使整个解决方案更加脆弱。

最简单的方法是使用带有可自动将移动用户发送到 m.yourserver.com 站点的重定向逻辑的 m. 子域。此解决方案对用户很有用，因为用户可以使用直接 m. 子域和规范的 URL。然而，对于开发人员而言，它的弊端在于要求桌面和移动网站同时具有设备检测逻辑。

实现网站重定向

当这两个网站都就位且在同一个 URL 下工作之后，您应该处理主机名，并决定针对每个请求执行的操作。如果主机名属于桌面网站，且检测到请求的浏览器为桌面浏览器，则一切将如预期一样工作。

否则，用户将看到一个登录页面，且会被告知他们正在尝试使用移动设备访问桌面网站。随后，他们可以保存首选项，以便在以后类似的情况中使用。该首选项存储在 Cookie 中，并在以后进行检查。如果请求引用的是移动网站中的 URL，而用户似乎有桌面浏览器，则考虑显示不同的登录页面，或让请求正常运行。最后，如果某个请求是从移动设备中发出并指向移动网站，则它将如预期一样运行。您可以让网站深入了解设备功能，并确定最适合的视图。图 1 展示了算法图。

图 1 桌面/移动视图切换器算法

在 ASP.NET 中，您可以像 HTTP 模块一样实现路由算法，并在桌面和移动网站上注册该算法。该模块将捕捉 BeginRequest 事件，并使用普通重定向，或者如果可能则重写 URL，以便适当更改目标网页（如图 2 所示）。

图 2 实现移动路由器 HTTP 模块

public class MobileRouter : IHttpModule
{
  private const String FullSiteModeCookie = "FullSiteMode";
  public void Dispose()
  {
  }
  public void Init(HttpApplication context)
  {
    context.BeginRequest += OnBeginRequest;
  }
  private static void OnBeginRequest(Object sender, EventArgs e)
  {
    var app = sender as HttpApplication;
    if (app == null)
      throw new ArgumentNullException("sender");
    var isMobileDevice = app.Context.Request.IsMobileDevice();
    // Mobile on desktop site, but FULL-SITE flag on the query string
    if (isMobileDevice && HasFullSiteFlag(app))
    {
      app.Response.AppendCookie(new HttpCookie(FullSiteModeCookie));
      return;
    }
    // Mobile on desktop site, but FULL-SITE cookie
    if (isMobileDevice && HasFullSiteCookie(app))
      return;
    // Mobile on desktop site => landing page
    if (isMobileDevice)
      ToMobileLandingPage(app);
  }
  private static Boolean HasFullSiteFlag(HttpApplication app)
  {
    var fullSiteFlag = app.Context.Request.QueryString["m"];
    if (!String.IsNullOrEmpty(fullSiteFlag))
      return String.Equals(fullSiteFlag, "f");
    return false;
  }
  private static Boolean HasFullSiteCookie(HttpApplication app)
  {
    var cookie = app.Context.Request.Cookies[FullSiteModeCookie];
    return cookie != null;
  }
  private static void ToMobileLandingPage(HttpApplication app)
  {
    var landingPage =
      ConfigurationManager.AppSettings["MobileLandingPage"];
    if (!String.IsNullOrEmpty(landingPage))
      app.Context.Response.Redirect(landingPage);
  }
}

在桌面网站安装后，此 HTTP 模块会捕捉每个请求，并检查请求浏览器。如果浏览器在移动设备上运行，该模块会重定向到指定的登录页面。登录页面是针对移动优化的页面，提供一对分别指向桌面网站和移动网站的链接。

登录页面应放在什么位置以便移动用户决定如何操作？一般来说这个问题无关紧要。但是，如果您将其放到移动网站上，则可以使用必需的所有路由逻辑来部署您的移动网站，而无需使用桌面网站代码库。如果更改到桌面网站，则会限制为在 web.config 文件中配置 HTTP 模块。

移动真正的含义是什么？

移动 Web 的世界并非简单地分为桌面计算机和其他两个阵营。移动设备至少涵盖智能手机和平板电脑。面向智能手机的移动网站可能无法在平板电脑上高效地运行，反之亦然。向平板电脑提供针对智能手机优化的页面并不能满足用户希望获得类似于桌面设备体验的预期。

那么您是否应该为平板电脑构建另一个平板电脑网站，为旧设备构建一个网站，再为可穿戴设备构建一个网站？总而言之，智能手机应该获得专门体验和专用的网站。可喜的是，当方向切换到纵向或横向时，平板电脑只需少量调整即可与桌面计算机呈现相同的内容，例如使用具有更多间距和更大字体且部分媒体查询支持的另一组 CSS 文件。这些调整需要更改现有桌面网站代码库。但是，它并没有太多的插入式更改。

存在在于如何检测智能手机，以及适用于您的企业情境的智能手机的定义是什么。

设备检测工具

智能手机没有通用的定义。智能手机并不是类似于操作系统版本号这样的物理属性。当浏览器请求页面时，会发送用户代理字符串，表示一些服务器端代码必须处理该用户代理字符串，并确定设备是平板电脑、智能手机还是其他设备。

设备检测需要专门的工具，这些工具的可靠性和准确性级别不同。例如，您可以使用一些 Modernizr 插件或通用例程来检查用户代理的已知子字符串。如果您只要将桌面设备和其他设备区分开来，此方法足够可信。

在这种情况下，检测到诸如 Android OS 的设备会告知浏览器该设备不是桌面设备。但是，检测到 Android 并不能帮助确定其是智能手机还是平板电脑。WURFL 框架 (wurfl.sourceforge.net) 是首选，因为其包含可在 IIS 和其他环境上在本地、云中、甚至 Web 服务器级别（不含代码，只是配置）运行的工具。

如果您选择构建移动网站以向移动用户提供专门内容，则必须清楚该移动网站可以检测到哪些设备（在智能手机、平板电脑以及其他设备中进行选择）以及如何检测设备，以便用户不管使用哪种设备都可以通过单一的 URL 来访问该网站。

总结

用户希望他们可以像在桌面设备上一样，在智能手机和平板电脑上无缝使用网页。虽然移动设备的处理能力或缓存大小有限制，但是这不能成为提供的页面需要缩放且需要长时间加载的理由。将桌面设备与其他设备区分开来也不是明智的选择。需要某种级别的设备检测以提供良好的服务。涉及到设备检测和外形规格时，复杂程度和开发成本将会提高。

很多企业认为 RWD 就像经典的哥伦布立蛋，是用于解决难题的一个相当简单但又出色的解决方案。与我们通常所了解的相比，创建自适应网站更复杂，且费用更高。更重要的一点是，RWD 方法适用于新网站或大幅修改后的网站。您不能只轻松地添加 RWD 来将针对桌面设备设计的现有网站移动化。无论如何，解决移动受众的需求是一种业务需要。而且越快越好。

Dino Esposito 是《Microsoft .NET:Architecting Applications for the Enterprise》（Microsoft Press，2014 年）和《Programming ASP.NET MVC 5》（Microsoft Press，2014 年）的合著者。作为 JetBrains 的 Microsoft .NET Framework 和 Android 平台的技术推广人员，Esposito 经常在全球行业活动中发表演讲，并在 software2cents.wordpress.com 和 Twitter（网址 twitter.com/despos）上分享他对于软件的愿景。

衷心感谢以下技术专家对本文的审阅：Jon Arne Saeteras