让您的 ASP.NET 项目适配移动端的 4 个技巧

移动端的挑战

移动设备已成为全球势不可挡的主流，91% 的美国人拥有智能手机，而发展中国家的许多人则将移动设备作为他们访问网络的主要途径。作为一项拥有超过 10 年历史的成熟技术，ASP.NET 是数百万个成熟 Web 应用程序的基础，这些应用程序现在需要更好地优化以应对移动端的挑战。

在本文中，我将向您展示如何交付针对移动 Web 浏览器优化的更好 ASP.NET 应用程序，并演示 Telerik ASP.NET AJAX 控件如何让这项工作变得更轻松。

技巧 #1：为支持触摸的浏览器设计主题

当 Web 浏览体验转移到支持触摸设备的浏览器上时，内容呈现有了新的、不同于鼠标操作浏览器的规则。为触摸设备设计内容时，需要遵循三个简单的规则：

1. 不要将内容隐藏在“悬停”交互之后。因为没有鼠标指针可以悬停，支持触摸的设备无法检测到手指未接触屏幕的状态并将其传递给浏览器。
2. 在表单中使用现代 HTML5 输入类型。这将允许浏览器提供适合您字段的、带有快捷键的相应键盘。在某些设备上，“tel”电话号码输入类型会强制浏览器为用户显示电话键盘。这对于小屏幕来说是一个非常有用的功能。
3. 为人们的手指提供充足的空间。说实话，对于手指粗的人来说，很难触摸到 10pt 字号段落中的超链接。在您的按钮和控件上使用大的触摸区域。微软建议将触摸区域设计为 40 像素或更宽，且目标之间至少有 10 像素的间距。

这些都是易于学习和遵循的出色规则，而 Telerik ASP.NET AJAX 控件附带的 MetroTouch 和 BlackMetroTouch 主题就遵循了这三条规则。

您可以通过在 web.config 中配置 ASP.NET 项目使用 MetroTouch 主题来优化您的应用程序，使其拥有更大的触摸区域，如下所示：

<configuration>
	<appSettings>
		<add key="Telerik.Skin" value="Metrotouch" />
	</appSettings>
</configuration>

这些主题甚至可以轻松应用于标准的 HTML 标记，以产生美观的体验。您可以使用 Telerik FormDecorator 控件为 HTML 元素设置 MetroTouch 主题样式，如下所示：

<telerik:RadFormDecorator ID="formDecorator" DecoratedControls="all" runat="server"
          DecorationZoneID="formDiv" Skin="Metrotouch"></telerik:RadFormDecorator>

DecorationZoneID 是一个 HTML 元素的 ID，该元素的内容将使用 Skin 属性指定的主题进行格式化。

技巧 #2：使用轻量级渲染优化您的输出

使用蜂窝网络连接到互联网的移动设备在移动过程中总会在某个时刻遇到带宽问题。任何网络都总有信号弱的地方，您可以相信，在某个时刻、以某种方式、在某个地方，想要使用您网站的人中总会有人正好处在蜂窝网络的信号较弱区域。他们的连接可能更慢，甚至不够可靠。对于这些场景，您必须确保您的网站为移动设备访问者提供尽可能小的可传输内容。

这就是为什么 Telerik ASP.NET AJAX 控件提供了一种轻量级渲染模式，旨在减少传输到现代浏览器用于格式化控件的标记、CSS、JavaScript 和图像的数量。测试场景表明，轻量级渲染可以减少高达 65% 的总带宽使用量。

您可以通过如下配置 RenderMode 属性来设置 Telerik ASP.NET 控件的轻量级渲染模式：

<telerik:RadMenu runat="server" ID="menu" RenderMode="Lightweight">

这是一个简单的更改，但该配置将始终为所有请求菜单控件的访问者提供轻量级渲染。您的另一个选择是启用自动检测模式，该模式将根据请求它的浏览器来传输轻量级渲染的代码。我建议您在 web.config 中进行此配置更改，以便在您的应用程序中统一影响所有控件。

<configuration>
  <appSettings>
    <add key="Telerik.Web.UI.RenderMode" value="auto" />
  </appSettings>
</configuration>

当我们使用 Telerik ScriptManager 时，可以采取进一步措施来整合我们的 JavaScript 代码。

技巧 #3：使用 ScriptManager 捆绑您的脚本

Telerik ScriptManager 能够从内容分发网络（CDN）中提取和引用通用的 JavaScript 源码。如果您想减少从服务器传输的数据量，这是一个很好的功能，但它不一定能减少传输到移动浏览器的数据量。

ScriptManager 内部有一些功能可以连接和压缩您的脚本。通过在页面上使用如下标记来激活 ScriptCombine 和 OutputCompression 功能：

<telerik:RadScriptManager ID="scriptMgr" runat="server" EnableScriptCombine="true" OutputCompression="Forced">

通过设置这些值，您的网站访问者将为该页面下载一个单一的 JavaScript 文件，而不是为所有不同的控件和您可能使用的框架请求多个文件。此外，由于 OutputCompression 设置，传输给访问者的那个单一文件将被压缩。这两个设置的结合将减少对您服务器的请求次数，并加快您网页的响应时间。

技巧 #4：引入备用渲染方式以改变应用程序的外观

最后，考虑一下您向移动访问者展示的是什么。他们真的需要以表格视图查看所有网格内容吗？或者是否可以将其重塑为列表，每条记录分多行显示？您的访问者真的需要看到日程表上的整个工作周吗？或者议程视图是否能简化他们的体验？

您可以通过几个简单的步骤提供网页内容的备用渲染。首先，您需要在 ASP.NET 路由表中开始实施 FriendlyUrls。这可以通过以下方式实现：

1. 将 NuGet 包 Microsoft.AspNet.FriendlyUrls 添加到您的 Web 项目中。
2. 在 RouteConfig.cs 中添加如下一行代码：

   routes.EnableFriendlyUrls();

3. 没有第 3 步。就是这么简单。

在 FriendlyUrls 运行后，您可以编写新的 Web 窗体，其名称与您想在移动设备上替换其内容的原始窗体相同。只需将这些文件放在与原始文件相同的文件夹中，并使用相同的基础文件名和 .mobile.aspx 扩展名。这将是触发器，指示 ASP.NET 路由器在移动设备请求时显示该文件的内容。

在这些 mobile.aspx 版本的内容中，您现在可以更改所用控件的功能，使它们在较小设备上显示得更好，功能也更简单。将 RadGrid 替换为 RadListView，以更简洁的方式显示数据。将 Scheduler 的显示模式从“日视图”更改为“议程视图”，使内容更清晰。围绕这些控件有许多选项可以传输更简单、更小的信息。请在 Telerik ASP.NET AJAX 演示网站上探索它们的功能，以了解更多关于如何使用控件的不同显示模式为您的网站访问者提供更好体验的信息。

摘要

Telerik 的 ASP.NET AJAX 控件为在移动设备上支持您的 Web 应用程序用户提供了许多选项。我建议您为您的移动用户实施其中几个，如果不是全部的话。MetroTouch 将提供一个更大、更“易于触摸”的界面，轻量级渲染将提供更小的内容，ScriptManager 将减少对您 Web 服务器的请求次数，而备用渲染将以更适合小屏幕浏览器的形式提供内容。

如果您还没有使用 Telerik ASP.NET 控件，请下载试用版，立即体验这些功能吧。