第二部分 – 第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
