移动浏览

  • 项目

获得更佳的移动浏览体验

史蒂文 · 桑德森

谁这几天通过移动设备访问网站？在 2005 年，您将照片作为观点发扬光大、 富裕的西方人的平均移动互联网用户 — — 可能是在软件开发者 — — 谁会花时间去他笨重的手机连接到要忍受痛苦地有限的浏览体验的慢数据网络 — — 和付费顶部美元。换句话说，边缘的案例。

现在移动 Web 访问猛增到全球的主流。我不是说的青少年、 学生和显示对方他们的智能手机和平板电脑设备在每一家咖啡店里跨欧洲和北美的退休的老人。今天有约 1亿元活动的移动宽带订阅，足以左右一中七人在地球上 （和仅有两个在七定期以任何方式使用互联网）。移动设备都有望成为单一五年内访问 Web 的最常见方法。已经在一些增长最快的国家 — — 尤其是印度 — — 手机有很多人上网的唯一出路。即使在美国，25%的移动 Web 用户说他们"从不"或"少"上网使用的是传统的 PC。(信息来源，请参阅"移动 Web 访问"。)

显然，如果您正在构建一个公共的 Web 站点，您需要考虑支持移动浏览器。

为什么移动浏览是不同

正如你所知，每个移动的浏览器支持某种形式的 HTML。很多人，特别是在高端设备如 Iphone 和 Windows Phone 7，支持最新的 HTML，CSS 和 JavaScript 标准和呈现像素完美副本的传统 PC 浏览器中看到的内容。

您最便宜的选项，支持移动浏览器，则什么也不做这种问题。只可以为同一面向台式机的页的所有设备，提供服务和信任来处理它们的移动浏览器。但选择此选项会导致很差的移动浏览体验，为以下几个原因：

  • 手机屏幕较小。 某些移动浏览器，如 Opera Mini，通过动态地重新格式化的页面布局和样式处理桌面宽度的页面。由此产生的外观很少是您的设计器所铭记。其它手机浏览器，如 iphone Safari 或互联网资源管理器中的 Windows Phone 7，使桌面宽度的页面，然后强制放大和缩小，并读取文本中移动用户。这是耐心的一个测试你的访客。
  • 移动数据网络通常也很慢。 不要以为你的访客有相同的带宽为固网宽带用户。这样重量级的站点不受欢迎，甚至可能由兆字节，支付他们。
  • 移动设备通常没有鼠标或键盘。 熟悉的桌面用户交互机制总是毫无意义的移动设备上。例如，单击小链接或按钮上的可能是困难且容易出错的面向触摸的设备上，和"飞翔"的概念甚至可能不存在。

因此，如果要提供一流的移动浏览体验，它是时间应用您的工程技能，占主要设备类型之间的差别。

在 ASP 中的移动支持。网络

有两个主要方面，支持移动浏览器：

  1. 检测一个给定的访客正在使用哪种类型的设备。 ASP。NET 有浏览器检测的内置支持。在下一节中，我会检查这一机制，以及如何可以进行自定义的扩展。
  2. 生产工程以及对检测到的设备的输出。 如果您扫描通过前面的列表中的挑战，你就会意识到这些不是你技术 
platform 可以自动处理的事情。移动支持是主要的用户体验 （用户体验） 设计，不基本上的标记。在本文稍后部分中，我将描述技术手段产生不同的输出为不同的设备，但仍然由你来设计和实施不同的布局和手机的用户工作流。

请注意，直到周围 ASP。NET 2.0，发表在 2005 年，生产输出到移动设备上工作事的标记，因为通常的装置，在该时间使用专科协议和标记语言，包括 WAP、 WML、 cHTML。ASP。NET 2.0 包含"移动控件"来支持这些格式。然而，这些格式现在已完全过时，因为所有的主流浏览器现在使用 HTML，因此 ASP。NET 移动控件也是过时的。

浏览器检测

ASP 的核心。NET 的平台，是 Web 窗体和模型视图控制器 （MVC） 的基础，已浏览器检测的内置支持。你可以找出访问者使用使用 Request.Browser.IsMobileDevice 布尔值属性的手机浏览器。但是，您应该了解这种检测要注意可能会影响您的精确度局限性的工作方式。

ASP。网确定哪种浏览器发出请求和哪些功能的浏览器通过比较传入的请求用户代理标头字符串，正则表达式描述常用的浏览器的 XML 文件中的一系列针对已 （屏幕大小、 支持 JavaScript 等等)。

这些正则表达式 — — 和有关相应设备功能的信息 — — 存储在一组的 C:\Windows\Microsoft.NET\Framework\v4.0.30319\Config\Browsers 文件夹中的.browser 文件 （或相当于您的安装）。例如，标准的 iphone.browser 文件包含在所示的代码图 1。

图 1iphone.browser 文件

<browsers>
  <!-- Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ 
       (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3 -->
  <gateway id="IPhone" parentID="Safari">
    <identification>
      <userAgent match="iPhone" />
    </identification>
    <capabilities>
      <capability name="mobileDeviceModel" value="IPhone" />
      <capability name="mobileDeviceManufacturer" value="Apple" />
      <capability name="isMobileDevice" value="true" />
      <capability name="canInitiateVoiceCall" value="true" />
    </capabilities>
  </gateway>
  ...
</browsers>

在文件中，下列元素定义与传入的用户代理标头字符串匹配的正则表达式：

<userAgent match="iPhone" />

一旦系统找到匹配的用户代理正则表达式，XML 数据的其余部分指定的类型与该设备的功能。

此系统的限制是明确： 它只可以检测已知，所述的移动设备中这些文件时 ASP。NET 4.0 首次推出。 不幸的是，这不包括常见的现代浏览器，如歌剧移动或默认浏览器谷歌 android 平台。 Request.Browser.IsMobileDevice 错误地将设置为 false，这些浏览器中。

自定义和增强浏览器检测

你有两个主要选项克服的默认浏览器检测设施的限制：

  1. 您可以提供您自己的.browser 文件来表示较新的设备。
  2. 您可以使用第三方浏览器检测库。

若要采取的第一个选项，您的项目的名称在 Visual Studio 解决方案资源管理器中右键单击并选择添加 |添加 ASP。网络文件夹 |App_Browsers。 然后可以将.browser 文件添加到该文件夹中 ； 例如，通过将从您的 C:\Windows\Microsoft.NET\Framework\v4.0.30319\Config\Browsers 文件夹复制到现有的文件，然后编辑其鉴定经常表达和设备能力说明来表示所需的浏览器。

如果您不想负责跟踪所有数以百计的新推出的移动浏览器和.browser 文件保持最新状态，可以采取第二个选项，并使用第三方浏览器检测库。

目前，我推荐的一个是 51degrees。觉着基础，在 CodePlex 上承载的开放源码 (MPL 许可证） 图书馆51degrees.codeplex.com。 此库不使用.browser 文件。 相反，它通过匹配它们针对无线通用资源文件 （WURFL） 数据库，可以使用免费的电荷在这两个商业和非商业应用程序标识设备。 关于 WURFL 的详细信息，请参阅wurfl.sourceforge.net。

最简单的方法来安装 51degrees。觉着基础到 Web 窗体或 MVC 项目是通过使用 NuGet 软件包管理器。 如果您在运行 ASP。NET MVC 3，你已经有 NuGet。 如果没有，您可以搜索并安装 NuGet 使用 Visual Studio 扩展管理器 （它是在工具菜单）。 一旦你有了 NuGet，请转到工具 |图书馆的软件包管理器 |软件包管理器控制台，然后发出以下命令在控制台中：

安装包 51Degrees.mobi

这将添加到您的项目：

  • 您的项目，在 /App_Data/wurfl.xml.gz 的 WURFL 数据库的最新副本
  • 对 FiftyOne.Foundation.dll，库的主要程序集的引用
  • 要启用 51degrees 的 Web.config 条目。莫比基

51degrees。觉着基金会插入，并增强了 ASP。网络标准 Request.Browser API。 只是通过安装的软件包，会从 Request.Browser.IsMobileDevice，获取更准确的结果，因为新版本的 WURFL 数据库可以检测到今天的常见移动浏览器，包括歌剧移动和谷歌 Android 浏览器。

请注意，默认值 51degrees。觉着基础 Web.config 设置还配置了它所有的移动浏览器的 url 的请求重定向 ~ / Mobile/Default.aspx。 在许多情况下 — — 特别是对 ASP。NET MVC 应用程序 — — 这不是你想要的行为。 您可以禁用的评论时重定向或删除 <redirect/> 如果你想要包添加到 Web.config 文件中，然后您的元素也可以删除它的 /Mobile/Default.aspx 文件。

造型的手机

现在，您已经知道如何可靠地检测移动浏览器，会显示一种关键的方法来控制移动浏览器的页的呈现方式。 之后，我将介绍一些建筑的选项，为不同的设备类型的呈现的标记。

许多现代移动浏览器，包括 Safari iOS 和互联网资源管理器中的 Windows Phone 7，尝试使呈现页面的外观，就像他们在桌面浏览器上。 他们知道大多数页面用于的屏幕约 1000 像素宽和设计器已很可能不占的小得多的宽度。

要解决此问题，他们通常呈现到虚拟的画布上称为"视区，"通常约 1000 虚拟像素宽的页面。 浏览器可以然后扩展该虚拟的画布的视觉显示任意，使用户能够放大和缩小和潘周围。 这项安排所示图 2。

A Mobile Browser Rendering a Desktop-Width Page onto a Virtual Viewport

图 2A 移动浏览器呈现到虚拟的视区的桌面宽度页

虽然这样，页面将呈现为目的的设计器，它遭受重大的可用性缺点用户放大时充分阅读文本，他看不到页面的完整宽度，并必须这样做水平滚动。

控制视区宽度

你实际上设计为小屏幕的页面，如果你不想他们被摆在一个虚拟的视区约 1000 像素宽。 相反，您会希望你览一个是实际的屏幕宽度相同的视区，使它巧妙地配合水平没有缩放所需的页面。

许多最受欢迎的手机浏览器都支持使您可以控制的虚拟的视区宽度的非标准的"视"meta 标签。 例如，如果您将以下内容添加到页面的 <head> 部分中，浏览器将页的布局上视区 320 像素宽：

<meta name="viewport" content="width=320"/>

这通常是更为合适的手提电话。

请记住某些移动设备有更高的水平分辨率的屏幕。 例如，iPhone 4 有 640 物理像素每行。 然而，它仍然是使用一个虚拟的视区的约 320 像素 ； 有意义 否则，结果文本会太小而无法读取不放大。

如果您想要的您可以让不同的尺寸可根据设备的虚拟视区正在使用，使用下面的语法：

<meta name="viewport" content="width=device-width"/>

请注意某些移动设备不会给你文字设备宽度。 他们解释"设备宽度"，意思"虚拟的视区宽度，制造商认为给了最令人满意的结果"。所以，例如，iPhone 4 定义设备宽度为 320 像素，尽管其更高的物理分辨率。

标记的建议

每当你设计的移动浏览器的页：

  • 视区 meta 标记用于使适合屏幕的水平宽度的视区。
  • 调整您的页面布局、 CSS 样式等占此窄的宽度。 如果访问者不需要缩放或水平滚动，您的页面的感觉更像是为他们的设备而设计的本机应用程序 — — 远更好的体验。
  • 请确保您的链接和按钮都足够大，随便拍。 指尖都比鼠标指针的提示大得多。
  • 不使用甚高分辨率图像或大量 JavaScript 文件，尽量减少对带宽的要求。

建筑的选项

你见过如何检测手机浏览器，并已经提供了一些建议，为更好地适合他们的标记。 现在我将描述构建您的应用程序生成不同的输出，对于不同的浏览器类型的三个简单选项：

  1. 显示和隐藏的根据浏览器类型来标记部分。
  2. 切换主页面根据浏览器类型。
  3. 显示根据浏览器类型完全不同的内容。

每个有其优点和限制，因此它是你选择适合您的需求的方法。

显示和隐藏标记

如果你只需要包括或排除 meta 标记和 CSS 文件引用根据浏览器类型，这是非常简单的。 例如，在主 Web 窗体页中，您可以添加一个"如果"语句内你 <head> 部分：

<head runat="server">
  <title>My site</title>
  <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

  <% if (Request.Browser.IsMobileDevice) { %>
    <meta name="viewport" content="width=device-width"/>
    <link href="~/Styles/MobileSite.css" rel="stylesheet" type="text/css" />
  <% } %>
</head>

Asp 的剃刀布局的等效。NET MVC 3 应用程序中看起来像这样：

<head>
  <title>@ViewBag.Title</title>
  <link href="@Url.Content(
    "~/Content/Site.css")" rel="stylesheet" type="text/css" />
  @if (Request.Browser.IsMobileDevice) {
    <meta name="viewport" content="width=device-width"/>
    <link href="@Url.Content(
      "~/Styles/MobileSite.css")" rel="stylesheet" type="text/css" />
    }
</head>

这是一种非常基本的技术，但如果你能适应您现有的标记，以适应小屏幕纯粹由单独的 MobileStyles.css 文件中添加额外的 CSS 规则，可能会充分。 当然，可以使用相同的机制，其他地方在您的主页和意见修改浏览器的类型的输出。

如果您正在构建一个全新的网站，可以设计及其标记，以使它适合只取决于使用的 CSS 的台式机和移动屏幕，这种技术的效果最好。 在这种情况下，所需的额外发展努力是非常低的。 很多网站的这种简单的方法就不足够，但有两种选择： 切换主页面或显示不同的内容。

切换主页面

您可能能够保持不变，您现有的内容页，只是适应小屏幕使用不同的母版页或布局的布局。 例如，如果您正在构建一个 Web 窗体应用程序，您可以定义动态切换其母版页的标准页基类：

public class PageBase : Page
    {
      protected override void OnPreInit(EventArgs e)
      {
        if (Request.Browser.IsMobileDevice)
            MasterPageFile = "~/Mobile.Master";
      }
    }

然后，为其布局应因设备类型的任何页面，设置其继承而不是通常的 System.Web.UI.Page 的 PageBase 的代码隐藏类。 然后可以创建母版页 /Mobile.Master 在其布局和 CSS 样式进行了优化的移动 devicess。

它是更简单的 ASP。NET MVC 3 开发人员用剃刀布局 — — 您可以通过编辑 /Views/Shared/_Layout.cshtml 文件包含以下动态地使所有您视图切换布局：

@{
  Layout = Request.Browser.IsMobileDevice 
             ? "
~/Views/Shared/_MobileLayout.cshtml"
             : "~/Views/Shared/_Layout.cshtml";
}

然后，在 /Views/Shared/_MobileLayout.cshtml，添加新的剃刀布局文件并修改其结构和 CSS 样式来适应移动设备，如你所愿。

这让更多的灵活性，比以前技术的变 CSS 和偶尔的标记段孤独，但仍有限制，均台式机和移动页必须显示本质上是相同的信息，使用相同的互动机制。

显示不同的内容

对于某些应用程序，您将无法适应您桌面的页来适应移动设备只使用不同的 CSS 或母版页和布局，因为：

  • 您的业务需求可能太苛刻。 如果您想要真正流畅的移动体验，您可能需要移动设备，来显示不同 （也许） 信息较少，并可能指导用户完成不同的工作流。 例如，您的用户注册过程可能有较少的步骤和收集信息较少，为移动的游客。 这是更多的 CSS 的事。
  • 你可能并不适合这种变化的旧代码工作。 例如，您的现有标记可能包含硬编码元素尺寸和样式。 修改此使用 CSS 或不同的母版页上可能是不可能的或可能只是使事情更复杂、 更少易维护。

在任一情况下，最终的解决方法是使用不同的设备类型的完全独立的逻辑和标记。 缺点是你再有两个版本，以维持，但主要的好处是两个行为可以独立地变化，在您希望的任何方式。 对于 Web 窗体的开发，实施通常是一组特定于移动的 ASPX 页，和对于 MVC 的开发，这通常意味着移动特定控制器和视图创建一个新的领域。 不管怎样，你需要一些逻辑，以重定向到正确的页面取决于它们的设备类型来港旅客。

代码示例显示如何执行重定向逻辑，是符合这两个输出缓存和窗体身份验证在 Web 窗体和 MVC 的方式，请参阅白皮书在bit.ly/gHT3Ap。

结论和建议

在本文中，您已经学习了：

  • 移动浏览器为什么越来越重要。
  • 为什么大移动支持是主要的用户体验设计，不只是不同的标记。
  • 如何为核心的 ASP。默认情况下，网络平台检测移动浏览器。
  • 如何默认浏览器检测方法是有限的以及如何扩展或替换它。
  • 如何移动浏览器显示桌面大小的页面上小屏幕，和如何影响的。
  • 将不同的输出发送到不同的浏览器类型的建筑选项。

当您选择最适合您的应用程序和最终用户的技术的组合，我顶的建议是优先可用性 和 测试。 没有一点实现移动的支持，如果它最终给用户浏览体验更糟 ！ 下面是一些需要考虑的事项：

提供移动用户的一种办法的切换回桌面的常规视图。 通常，这意味着将链接放在顶部的网页说"切换到桌面视图"。开关的实现的方式取决于您的体系结构 ； 它可能只是链接到台式机版本的一个给定的 URL，或它可能设置将覆盖您正常浏览器检测机制的 cookie。

这项设施是特别重要的如果您移动页显示较少比桌面网页的信息，因为电力用户会感到灰心，如果他们不能访问信息或他们知道应该有的功能。

将重定向到移动视图时，不会丢失信息。 在一些网站上移动旅客被重定向到移动网页，无论他们请求的页面。 这是对于用户来说，非常令人沮丧，实质上休息，几乎每个传入的链接。 如果您没有被请求的页移动版本，只是显示它的桌面版本。

验证您使用实际的设备或仿真程序的实现。 您移动友好的布局，如您期望的所有设备，不可能处理 CSS 和 meta 标签。 您必须在实际设备或仿真程序上进行测试。 受欢迎的移动设备仿真程序的列表，请参见asp.net/mobile/device-simulators。

它是确定以启动小。 你不必马上整个网站上创建的每个页面和功能的优化的移动版本。 对于许多企业而言，大部分的值将来自具有移动启用的主页，或许几个其他工作关键用户流如注册和目录浏览。

对于一些内联网应用程序中，它可能永远不会有关支持的移动设备。 但对于任何公共的互联网网站，您几乎可以肯定需要考虑移动浏览器，如果你要保持有关未来几年。

注意： 作为 51degrees 的替代方法。觉着基础，在 ASP 中使用 WURFL 数据的另一个选项。网络应用程序是通过官方的 WURFL。网 API，可在 http://wurfl.sourceforge.net/dotNet和 NuGet 作为一个名为"WURFL_Official_API"的包。

API 是可用 AGPL 和商业许可证下 （请参阅http://www.scientiamobile.com)。

史蒂文 · 桑德森 微软作为项目经理的工作团队，为您带来 ASP。NET MVC、 Web 窗体、 NuGet 和其他 Web 相关的善良。

衷心感谢以下技术专家对本文的审阅：斯科特 · 亨特