有几种方法来完成的最后一项（例如，在CSS中使用@Media标记目标屏幕尺寸，执行手机和浏览器检测等）。根据您的需要，你将需要确定什么是最好的解决办法。也许你的网站应该执行某种模板，你自己决定。
(译者：我按照例子做是没弄出来的，一定要注意当前_layout 所引用的css 和javascript的版本是否和你项目里的一样。)
如果你运行的应用程序两次（一次在全屏模式下，一次在移动设备或简单调整低于480像素的浏览器），你会看到两个非常不同的网站（参见下图）。
普通版：
Mobile版：
译者：酷么？你怎么觉得我不知道，我是觉得很酷！
如果您没有mobile设备可以测试的话。你也可以注释掉下边代码来查看效果：
<script type="text/javascript"> $(document).ready(function () { if (window.innerWidth > 480) { $("link[rel=stylesheet]").attr({ href: '@Url.Content("~/Content/Site.css")' }); } }); </script>
你也许会说，仍然有大量的工作要做，使一切看起来不错，但通过添加一些额外的data-role属性的默认布局，90％的工作已经完成了。接下来的步骤是探索特殊功能去让你的网站很有趣。 jQuery Mobile的有以下基本功能：
导航条（中页眉或页脚，带或不带图标）
页面过渡
对话框
按钮
表格
列表视图（在移动平台上提供了典型的手指滚动）
全面的主题化的支持，以换出完整的外观和感受。
导航条事例：
<div> @Html.Partial("_LogOnPartial") @Html.ActionLink("English", "ChangeLanguage", "Home", new { language = "en" }, null) ] @Html.ActionLink("Francais", "ChangeLanguage", "Home", new { language = "fr" }, null) ] </div>
下面的例子将呈现典型的智能手机的按钮，以及其他链接都将添加相同的样式。
@Html.ActionLink("My Cool Link", "SomeAction", "Home", null, new Dictionary<string, object> {{ "data-transition", "slide" }})
以下页面的过渡将在加载完Ajax后显现在新的内容。在我们的标准网站，其他的所有连接也这样做。
Dialog 例子：
<a href="https://www.jb51.net/foo.html" data-rel="dialog">Open dialog</a>
就像前面的例子，这将呈现为Web浏览器的通用的链接，但在移动版本，标准的弹出窗口将显示。
Button 例子：
<a href="https://www.jb51.net/index.html" data-role="button" data-inline="true">Cancel</a> <a href="https://www.jb51.net/index.html" data-role="button" data-inline="true" data-theme="b">Save</a>
正如您可能期望的那样，这些按钮放置在Header，他们将呈现在最上面一栏，一个在左边，一个在右边，模仿今天在智能手机的标准Header按钮。
Form例子：
<div> @Html.LabelFor(model => model.ShortName) </div> <div> @Html.EditorFor(model => model.ShortName) @Html.ValidationMessageFor(model => model.ShortName) </div>
没有什么改变。大多数内置的形式功能将完全呈现jQuery Mobile的预期。
List View例子：
<ul data-role="listview" data-theme="g"> <li><a href="https://www.jb51.net/acura.html" >Acura</a></li> <li><a href="https://www.jb51.net/audi.html" >Audi</a></li> <li><a href="https://www.jb51.net/bmw.html" >BMW</a></li> </ul>
上面的例子将列出所有的books，他们的标题被设置成为一个转向详细页的链接。这个链接在一个标准可滚动的列表中。
更改Theme的示例：
目前，jQuery Mobile的五个内置的主题，从一个字母到E每个
上述项目可以通过追加一个新的属性称为，改变他们的主题。data-theme，用不同的字母（A至E）表示。
译者：由于书里没有给例子。我在我们的_layout上改变代码如下：
<div data-role="page" data-theme="a"> <div data-role="header" data-theme="e">
我给page 一个主题是a，给header一个主题是e。下图是效果：
是不是有点像某个系列书的风格，囧。
还有太多太多jquery mobile 的例子。想知道更详细的内容，可以去JQuqey Mobile 官网去看看