第二部分 – 第05章
當開發的網站同時應用於移動和桌面屏幕時，必須選擇一個網站策略。三種最普遍的移動網站策略為：
- 響應式設計
- 獨立移動網站
- 動態提供內容
簡言之，這三種移動網站策略有如下不同：
- 網站將使用的URL集的數量
- 網站必須維護的HTML代碼集的數量
| 策略 | 一套URL | 一套HTML代碼 |
|---|---|---|
| 響應式設計 Responsive Design | 是 | 是 |
| 獨立移動網站 Separate Mobile Website | 否 | 否 |
| 動態提供內容 Dynamic Serving | 是 | 否 |
響應式設計
採用響應式網站設計的移動網站策略，意味著你的網站服務器總是向請求網站的網絡瀏覽器（多種設備）發送同樣的一套HTML代碼。網站CSS被用來根據特定設備的屏幕寬度改變網站頁面的渲染區域 。
不論用戶通過桌面設備還是移動設備訪問你的網站，網站的URL總是保持不變。例如，當你的網站主頁在桌面屏幕上顯示時：
www.example.com - PC端
當你的網站主頁在移動屏幕上顯示時：
www.example.com - 移動端
配置Viewport
為了網站的響應式策略能有效運行，前提條件就是配置Viewport。
<meta name="viewport" content="width=device-width, initial-scale=1">
示例
如下示例，兩個網站均使用了響應式設計，且網站頁面在移動和桌面設備上均能有效展現。
www.mobilewebsitebook.com www.analyticsbook.org
優勢
- 對今後來說，你將只需要維護一套網頁代碼。
- 雖然對桌面和移動用戶而言，為一頁內容只提供一個單一的URL，但是網頁的佈局將根據屏幕寬度（例如移動或桌面屏幕）自動調整。
劣勢
- 為了使網頁可以根據不同的屏幕寬度進行自動調整，你需要仔細設計CSS。
- 移動用戶訪問站點時，也不得不下載針對桌面屏幕的完整大小的圖片和文件，同時也下載針對移動屏幕的大小縮減過的圖片和文件。隨著頁面加載時間增加而網站性能減弱，這一過程經常終止。
獨立移動網站
採用獨立移動網站策略，網站便針對移動和桌面網站使用兩套不同的URL。例如，一套URL是針對移動網站，而另一套URL針對桌面網站。
示例
例如，網站主頁的URL為：
www.example.com - PC端 m.example.com - 移動端
例如，一個展現特定城市（例如上海）酒店清單的頁面：
www.example.com/shanghai-hotels/ - PC端 m.example.com/shanghai-hotels/ - 移動端
例如，一個顯示某個特定酒店信息的頁面：
www.example.com/shanghai-hongqiao-number-one-hotel/ - PC端 m.example.com/shanghai-hongquao-number-one-hotel/ - 移動端
例如，一個包含指向所有其他頁面鏈接的網站地圖頁：
www.example.com/sitemap/ - PC端 m.example.com/sitemap/ - 移動端
例如，網站的論壇主頁：
www.example.com/forum/ - PC端 m.example.com/forum/ - 移動端
搜索引擎代碼
根據Google的規則，通過增加代碼，可以允許Google的自然搜索算法更好地理解獨立移動網站的結構。比如，你應該在主頁的桌面版本中包含如下代碼：
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/"> ;
在你的主頁的移動版本中應該包括如下代碼：
<link rel="canonical" href="http://www.example.com/">
你應該添加相似的代碼以匹配網站上所有頁面的兩個版本。例如，在清單頁的桌面版本中，你應該添加如下代碼：
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/shanghai-hotels /">
在清單頁的移動版本中，你應該添加如下代碼：
<link rel="canonical" href="http://www.example.com/shanghai-hotels/">
優勢
- 每個網站都有一套獨特的HTML代碼和為設備優化了的（為用戶體驗）CSS。
- 當你有兩套獨立的代碼時，你可以用特定設備的優化代碼（不用對其他版本產生負面影響）來提升網站性能（例如加載速度）。
劣勢
- 預算。由於總是需要維護網站的兩套代碼，將對開發和維護工作提出更多的要求。
- 市場營銷。針對移動用戶，你必須使用一套獨立的移動URL進行市場營銷或推廣。
動態提供內容
依賴動態提供內容，你的網站通過單一的一套URL，根據請求網頁的用戶代理，對移動端用戶和桌面端用戶渲染不同的HTML代碼。
不論用戶是通過桌面設備還是通過移動設備訪問你的網站，網站的URL總是保持一致的。例如，當你的網站主頁在桌面端屏幕上顯示時：
www.example.com - PC端
當你的網站主頁在移動端屏幕上顯示時：
www.example.com - 移動端
Vary HTTP Header
動態提供內容運行的首要條件就是配置Vary HTTP Header. Vary HTTP Header是網站服務器響應請求的一部分，例如：
GET /page-1 HTTP/1.1 Host: www.example.com (...rest of HTTP request headers...) HTTP/1.1 200 OK Content-Type: text/html Vary: User-Agent Content-Length: 5710 (... rest of HTTP response headers...)
Vary HTTP Header通知網絡瀏覽器響應的內容將根據請求網頁的用戶代理進行改變。
優勢
- 針對網站的移動版本和桌面版本，僅需要維護單一的一套URL。
- 有兩套獨立的代碼，通過為特定設備優化的代碼（不會給其他版本帶來負面影響）便可提升網站性能（例如速度）
- 訪問網站的移動用戶僅需要下載針對移動屏幕/設備優化過的圖片和文件，它們的大小已經被縮減。
劣勢
- 你必須維護兩套獨立的HTML代碼，CSS，JavaScript等，這些內容都是針對特定設備的。
- 為使動態提供內容能正常運行，必須配置Vary HTTP header。該配置項對於操作系統（或者環境）而言是獨立的（例如IIS, Apache, Nginx等）。為了維護Vary HTTP配置，你必須在所有操作系統上更新Vary HTTP header信息。
- 上一章：設置網站虛擬主機
- 下一章：前端JavaScript框架：jQuery Mobile
移動網站性能技術白皮書在2017年3月正式出版。
英文版：Implement Mobile Website Strategies – 簡體中文版：部署移動網站策略
移動網站性能技術白皮書上的內容按下列許可協議發布： CC Attribution-Noncommercial 4.0 International
