1.4 本书各章示例的运行说明

由于本书中的所有例子都可以在桌面浏览器、手机浏览器（或手机模拟器）以及平板电脑浏览器（或平板电脑模拟器）中分别观察运行结果，为避免在每一章中都重复介绍，这里我们以本章为例，介绍观察各章运行结果的办法。换而言之，本书的所有例子都可以按本节介绍的办法观察运行结果。

1.4.1 在桌面浏览器中观察运行结果

当应用程序设计完毕并部署在Web服务器上以后，由于浏览该网站的设备可能是桌面浏览器，也可能是手机、平板电脑等移动设备，而这些不同设备的屏幕大小不一定相同（即使都是手机，不同型号的屏幕大小也不一定相同），为了观察在不同大小屏幕上的运行效果，可按照下面的步骤进行，当发现运行效果不合适时，修改相应的代码即可。

按<F5>键调试运行应用程序，逐渐缩短浏览器的宽度，模拟观察主页在手机、平板电脑等不同宽度的屏幕上显示的页面效果。

默认情况下，当浏览器宽度缩小到一定程度后，会自动折叠主菜单，并在右上方自动显示一个可在“折叠/展开”之间自动切换的按钮，这是Bootstrap提供的功能，在小屏幕（如手机、平板）上显示该网页时，将自动折叠菜单项，在大屏幕（如桌面计算机）上显示时，将自动展开菜单项。

图1-22（a）为主菜单折叠后的运行效果，图1-22（b）为主菜单展开后的运行效果。

也可以部署该项目以后，分别通过手机、平板电脑以及其他桌面浏览器访问该程序发布后的网站，观察同一个页面在不同设备中显示的效果。

1.4.2 在手机和平板电脑模拟器中观察运行效果

除了直接用IE 11.0浏览器观察本书示例的运行效果外，还可以在运行后按<F12>进入开发人员调试模式，在该模式下有一个【仿真】选项卡，通过该选项卡可模拟观察程序在不同手机上浏览的效果。

另外，也可以在VS2013开发环境下安装一个商用手机模拟器（与手机型号对应的手机模拟器一般都是收费的），模拟观察该应用程序在各种实际手机上运行的效果。这种方式与直接缩小浏览器宽度所观察的效果相比，不同之处是在商用模拟器中观察更像是在手机上实际进行操作（商用模拟器能显示不同型号和屏幕大小的手机外观，以及模拟显示手机软键盘等），除此之外，其他运行结果没有什么不同。

本书没有使用商用手机和平板电脑模拟器，而是利用HTML5的iframe元素制作了一个简单的模拟器，并将其保存在emulator.cshtml文件中。

emulator.cshtml文件的完整代码请参看源程序，此处不再列出源代码。

按<F5>键运行程序后，单击主菜单中的【模拟运行】，即可直接导航到模拟器运行页面，在模拟器运行页面中，可模拟观察本书所有示例分别在手机和平板电脑上运行的效果。

1．在手机模拟器中观察运行效果

在模拟器页面中，选择【模拟手机】，单击导航链接，即可观察本书各章例子模拟手机运行的效果。例如，导航到第10章的例子，将看到如图1-23所示的模拟效果。

2．在平板电脑模拟器中观察运行效果

在模拟器页面中，选择【模拟平板电脑】，导航到本书某一章的某个例子，可观察该例子模拟平板电脑运行的效果。例如，导航到第10章的另一个例子，将看到如图1-24所示的运行效果。

在后续的章节中，我们不再对每个例子都介绍在不同设备上分别观察运行结果的步骤，也不再介绍页面在不同大小设备上实际呈现的效果。读者调试运行本书其余各章的示例时，都可以按照这一节介绍的办法，分别观察所设计的网页在桌面、手机以及平板电脑等不同设备的浏览器中呈现的效果，以便及时调整或修改相关的代码。

从下一章开始，我们将系统学习ASP.NET MVC 5的各种基本编程技术。