1.4 本書各章示例的運行說明

由于本書中的所有例子都可以在桌面瀏覽器、手機瀏覽器（或手機模擬器）以及平板電腦瀏覽器（或平板電腦模擬器）中分別觀察運行結(jié)果，為避免在每一章中都重復(fù)介紹，這里我們以本章為例，介紹觀察各章運行結(jié)果的辦法。換而言之，本書的所有例子都可以按本節(jié)介紹的辦法觀察運行結(jié)果。

1.4.1 在桌面瀏覽器中觀察運行結(jié)果

當(dāng)應(yīng)用程序設(shè)計完畢并部署在Web服務(wù)器上以后，由于瀏覽該網(wǎng)站的設(shè)備可能是桌面瀏覽器，也可能是手機、平板電腦等移動設(shè)備，而這些不同設(shè)備的屏幕大小不一定相同（即使都是手機，不同型號的屏幕大小也不一定相同），為了觀察在不同大小屏幕上的運行效果，可按照下面的步驟進(jìn)行，當(dāng)發(fā)現(xiàn)運行效果不合適時，修改相應(yīng)的代碼即可。

按<F5>鍵調(diào)試運行應(yīng)用程序，逐漸縮短瀏覽器的寬度，模擬觀察主頁在手機、平板電腦等不同寬度的屏幕上顯示的頁面效果。

默認(rèn)情況下，當(dāng)瀏覽器寬度縮小到一定程度后，會自動折疊主菜單，并在右上方自動顯示一個可在“折疊/展開”之間自動切換的按鈕，這是Bootstrap提供的功能，在小屏幕（如手機、平板）上顯示該網(wǎng)頁時，將自動折疊菜單項，在大屏幕（如桌面計算機）上顯示時，將自動展開菜單項。

圖1-22（a）為主菜單折疊后的運行效果，圖1-22（b）為主菜單展開后的運行效果。

也可以部署該項目以后，分別通過手機、平板電腦以及其他桌面瀏覽器訪問該程序發(fā)布后的網(wǎng)站，觀察同一個頁面在不同設(shè)備中顯示的效果。

1.4.2 在手機和平板電腦模擬器中觀察運行效果

除了直接用IE 11.0瀏覽器觀察本書示例的運行效果外，還可以在運行后按<F12>進(jìn)入開發(fā)人員調(diào)試模式，在該模式下有一個【仿真】選項卡，通過該選項卡可模擬觀察程序在不同手機上瀏覽的效果。

另外，也可以在VS2013開發(fā)環(huán)境下安裝一個商用手機模擬器（與手機型號對應(yīng)的手機模擬器一般都是收費的），模擬觀察該應(yīng)用程序在各種實際手機上運行的效果。這種方式與直接縮小瀏覽器寬度所觀察的效果相比，不同之處是在商用模擬器中觀察更像是在手機上實際進(jìn)行操作（商用模擬器能顯示不同型號和屏幕大小的手機外觀，以及模擬顯示手機軟鍵盤等），除此之外，其他運行結(jié)果沒有什么不同。

本書沒有使用商用手機和平板電腦模擬器，而是利用HTML5的iframe元素制作了一個簡單的模擬器，并將其保存在emulator.cshtml文件中。

emulator.cshtml文件的完整代碼請參看源程序，此處不再列出源代碼。

按<F5>鍵運行程序后，單擊主菜單中的【模擬運行】，即可直接導(dǎo)航到模擬器運行頁面，在模擬器運行頁面中，可模擬觀察本書所有示例分別在手機和平板電腦上運行的效果。

1．在手機模擬器中觀察運行效果

在模擬器頁面中，選擇【模擬手機】，單擊導(dǎo)航鏈接，即可觀察本書各章例子模擬手機運行的效果。例如，導(dǎo)航到第10章的例子，將看到如圖1-23所示的模擬效果。

2．在平板電腦模擬器中觀察運行效果

在模擬器頁面中，選擇【模擬平板電腦】，導(dǎo)航到本書某一章的某個例子，可觀察該例子模擬平板電腦運行的效果。例如，導(dǎo)航到第10章的另一個例子，將看到如圖1-24所示的運行效果。

在后續(xù)的章節(jié)中，我們不再對每個例子都介紹在不同設(shè)備上分別觀察運行結(jié)果的步驟，也不再介紹頁面在不同大小設(shè)備上實際呈現(xiàn)的效果。讀者調(diào)試運行本書其余各章的示例時，都可以按照這一節(jié)介紹的辦法，分別觀察所設(shè)計的網(wǎng)頁在桌面、手機以及平板電腦等不同設(shè)備的瀏覽器中呈現(xiàn)的效果，以便及時調(diào)整或修改相關(guān)的代碼。

從下一章開始，我們將系統(tǒng)學(xué)習(xí)ASP.NET MVC 5的各種基本編程技術(shù)。