在移动设备上浏览网页时，用户体验至关重要。随着智能手机和平板电脑的普及，越来越多的用户通过移动设备访问网站。因此，为移动用户优化网站变得尤为重要。本文将介绍如何使用ASP.NET和jQuery Mobile创建一个对移动用户友好的网站界面。
在设计移动用户界面时，需要考虑以下几个目标：
为了实现这些目标，将使用jQuery Mobile库。这是一个经过测试的移动用户界面框架，适用于所有主要的移动浏览器。
jQuery Mobile库提供了一个移动用户界面框架，它通过JavaScript和CSS文件来风格化元素，以适应移动浏览器，而无需进行任何标记更改。
要将jQuery Mobile集成到项目中，请下载jQuery Mobile库，它包括JavaScript文件、CSS和CSS图像。还可以使用Microsoft的Ajax CDN，其中包含了jQuery Mobile库。对于这个项目，使用了jQuery Mobile的最新生产版本，即1.2版本。
有多种方式可以将jQuery Mobile集成到项目中。由于常规jQuery和移动jQuery不能在同一网页中引用，为jQuery Mobile JS文件创建了一个单独的文件夹MobileLib。同样，也为jQuery Mobile CSS和链接图像创建了一个单独的文件夹。
然后，在Global.asax.cs中创建了4个单独的ASP.NETBundles：
_Layout.cshtml文件在网站处于桌面模式时加载，引用桌面jQuery和CSS捆绑包。_Layout.Mobile.cshtml文件在网站处于移动模式时加载，引用移动jQuery和CSS捆绑包。
jQuery Mobile data*属性使用熟悉的移动样式格式化HTML元素。由于这是一个单页AJAX应用程序，而不是多页应用程序，采用了jQuery Mobile的单页模板，它在_Layouts.Mobile.cshtml中定义了头部、内容和底部部分。
对于搜索文本框，使用了INPUT元素。当INPUT元素的类型为"search"时，jQuery Mobile会将输入文本框格式化为左侧有搜索图像，右侧有删除图标。对于搜索按钮，使用了BUTTON元素，但data-theme="b"属性将按钮格式化为蓝色和椭圆形状。
jQuery Mobile样式只能应用于已经加载到浏览器DOM树中的元素。由于这个应用程序的大多数视图都是使用AJAX加载的，因此需要在表示需要样式化的HTML元素的jQuery选择器上调用jQuery Mobile插件。
在AJAX成功完成将HTML内容加载到DIV中后，调用适当的jQuery Mobile插件。由于这个JavaScript也用于桌面网站，必须检查全局对象$.mobile是否可用。如果是，那么知道在网站的移动版本中。
listview方法将jQuery Mobile列表样式应用于UL元素。button方法将jQuery Mobile按钮样式应用于A元素。selectmenu方法将jQuery Mobile选择菜单样式应用于SELECT元素。