读书笔记：智能手机web标准开发
【移动web网站的标记语言】
A WML即无线标记语言（主要面向旧式的移动设备）
主要版本WML1.1 和 WML 1.3。1.3引入了对彩色图像的支持。相应的脚本是WML script。
过时的语言了，iphone明确表示不再支持WML。
目前的情况（2010年10月），以美国市场为例，5%的手机仅支持WML，剩下的95%支持XHTML-MP, 或XHTML或HTML。
B CHTML（日本特有的，docomo发起的）
在日本市场，使用慢慢也在减少了，通过CHTML开发的各种I-mode服务已经被XHTML迅速的取代。
C XHTML-MP即XHTML移动配置文件，（主要面向非智能手机和除iphone以外的绝大多数智能手机）
XHTML-MP目前最广泛的移动web标记语言
XHTML-MP 1.0设定了移动标记语言的基本标记。
XHTML-MP 1.1 添加了<SCRIPT>标记并支持移动JavaScript。
XHTML-MP1.2 添加了更多表单标记和文本输入模式。
D XHTML （主要面向高级移动设备和智能手机）
E 传统HTML （主要面向高级移动设备和智能手机）
虽然现在的智能手机很多已经支持html，但是不推荐使用，因为html的语法非常的松散（据Opera统计，事实上只有4.13%的网页符合WEB标记和脚本编写标准）。为了对应这些松散的语法，桌面浏览器做了大量的工作。但是移动浏览器出于性能考虑，对这方面的优化很少。所以对于要面向智能手机提供丰富体验的站点，建议使用XHTML。
Android，iPhone等新的智能手机都支持XHTML，HTML，JavaScript和AJAX。部分HTML5和CSS3。
F HTML5
在高端手机上，HTML5有取代XHTML的趋势。
技术点：
A MIME类型
不同的语言，MIME类型不一样。MIME类型是页面能否被正确解析的前提。
由于传统的服务器（如apache）是面向桌面web的，所以需要向Web服务器配置中添加新的MIME类型（apache中使用AddType指令向mime.types等配置文件中添加新的MIME类型）。
如果页面是动态生成的，也可以用动态语言发送header信息。
B 头信息要正确。
以XHTML-MP 1.0为例：
<?xml version="1.0" encoding="UTF-8"?>
<!—上面是XML声明。XHTML-MP是XML -->
<!—DOCTYPE声明该文档是XHTML-MP 1.0 -->
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
【移动JavaScript】
与桌面JavaScript的差异：
1 全局方法eval是可选的
2 with关键字是可选的。
3 动态函数构造是可选的。
比如下列方法可能在某些支持JavaScript的手机上并不支持：
Window.onload = new function() {alert(‘Hello World’);};
4 必须使用分号终止编程语句：脚本行必须以分号结束。
5 DOM和事件支持会因移动浏览器不同而有差异。
比如：在最新支持重力感应手机终端上，屏幕翻转时触发的函数也可能不一致，有的使用onresize函数，有的使用onorientation函数。
6 减少了支持的字符集。
7 必须声明相应的DTD，如xhtml1.1或1.2。
8 某些机型的专有方法：比如有些机型对GPS的支持，和对多点触摸的支持。
开发原则：
A 在不支持JavaScript的终端，也要提供可用的web体验。
B 真机测试。
C AJAX使用计时器的时候要谨慎，定时执行的话可能会带来电池耗电过大，还有上网流量问题。
【移动CSS】
1 删除了密集型CSS功能，如属性继承和3D元素对齐方式。
2 有两种标准：无线CSS和CSS移动配置文件。两者差别较大。
确实手机支持哪种css：
A 查看手机浏览器制造商文档。（有些浏览器不提供）
B 查询设备数据库。
技术点：
1 所有数字属性都必须包含单位。
2 对font-family使用常规值，而对font-size使用相对值。实际上，开发人员无法控制移动设备上的安装的字体。所以较为简单的常规font-family值以及相对的font-size值，来实现灵活的页面样式。
3 唯一可靠的border-style值是solid。高级浏览器可能会支持其他边框样式，但只有solid样式的边框线可以在小尺寸屏幕上很好的呈现。
【页面调试环境】
以下三种的可靠性依次递增：
1 浏览器模拟。如Firefox插件
2 移动浏览器模拟器
3 真机。（必须的）
文档验证器：
在移动Web中，样式表和标记语法的有效性是必不可少的，页面必须符合标准语法，以确保在广泛的移动Web浏览器中的兼容性。
W3C标记验证服务：http://validator.w3.org
W3C CSS验证服务：http://jigsaw.w3.org/css-validator/
W3C MobileOk检查器：http://validator.w3.org/mobile/
mobiReady: http://ready.mobi/
Validome: http://www.validome.org/
测试时需要意识到如下问题：
通过wi-fi和通过运营商无限网络（GPRS、GSM、UMTS、LTE、CDMA）访问web站点是有差别的，前者没有通过移动运营商专用网络。
移动运营商专用网络可能会过滤、缓存甚至修改web页面的内容，同时还会提供一些有价值的服务，如唯一的用户标志和统一计费等等。
【设备识别和内容自适应】
移动Web开发核心原理：设备识别和内容自适应。
1 设备识别：
主要依靠User-Agent来识别移动移动浏览器，制造商和型号。
但只有User-Agent的信息是不足够的，必须使用设备数据库获取设备信息。
设备信息数据库：
A WURFL（开放的数据库，并提供API）-----欧美
B DeviceAtlas（商业设备数据库和API）------欧美
C MOBYRENT-----日本
2 内容自适应：
结合1的设备识别，针对不同移动终端输出不同的页面内容。
开发一个内容自适应移动web网站的流程：
A 确定该移动web站点所面向的移动设备。
B 以设备数据库中的可用特征为指导，基于共享的功能将目标设备分成不同的组。
C 确定移动web站点中可以共享的功能。
D 针对不同设备组，设计不同的对应方案：设定如何针对每个组精确的更改web站点内容和页面呈现。
以显示图片为例，在不同大小的手机屏幕上，显示的是不同大小的图片。因此每个图片有多个版本，对于用户上传的图片，也需要生成不同版本的缩略图。
比较典型的设备组参考：（一个设备可以属于多个组）
第一组：支持JavaScript和AJAX的浏览器。
第二组：屏幕宽带为320像素或更大的浏览器。
第三组：屏幕宽度介于240像素与319像素之间的设备。
第四组：屏幕小于240像素的设备
第五组：仅支持WML浏览器的设备
此外，根据项目的面向终端范围和项目需求，设备组可以再细化或者精简，比如：使用WebKit引擎的浏览器（iphone和Android上的浏览器）等，WebKit浏览器支持专用的很有用CSS扩展。
理想的情况：
采用渐进增强的开发方式，先定义内容，然后通过CSS增强内容样式，最后通过JavaScript增强用户体验。
即：内容和样式彻底分离（如使用DIV+CSS设计页面），在不同的手机终端，使用不同的CSS（及不同的图片）。在支持重力感应的手机终端中，横向和纵向使用不同的CSS。在不支持JavaScript的情况下，页面可以正常使用，在支持JavaScript的情况下，客户体验更丰富。
一般经验：
1 首先开发基本的版本。
2 仅创建两个移动版本，其中一个用于基本的手机，另一个用于智能手机。然后根据客户所使用的手机优化功能更丰富的版本。
【页面/功能设计】
1 仅提供用户所需的功能，简化所有内容
2 最大限度减少交互。
3 将移动web站点限制为三级导航。移动用户访问站点的时间很短暂，要在尽可能短的时间内找到想要查看的内容。也要容易返回到上一级。
4 保存用户设置，减少用户交互。使用cookie保存用户设置。（比如图片大小选项，是否3G版本等）；
5 纵向模式和横向模式要都能正常显示。正确可以使用样式（100%宽度等）来解决此问题。
6 优化所有内容。（图片：使用PNG可以实现质量和大小的折中。JS,CSS文件优化）
7 尽量避免使用以下功能：弹出窗口、鼠标悬停菜单、自动重定向、外部链接、水平滚动以及框架。
8 AJAX：可降解。
【智能手机浏览器】
1 智能手机浏览器通用的web技术
A Viewport Meta标记。
<meta name=”viewpost” content=”width=240,height=320,user-scalable=yes,
initial-scale=2.5,maximum-scale=5.0,minimum-scale=1.0” />
width和height指令分别指定视区的逻辑宽度和逻辑高度。
user-scalable指令指定用户是否可以缩放视区，即缩放Web页面的视图。
Initial-scale指令用于设置用于Web页面的初始缩放比例，值为1.0时将显示未经缩放的web文档。
Maximum-scale和minimum-scale指令设置用户对web页面缩放比例的限制，值的范围是0.25到10.0.
B 在JavaScript中检测方向变更（横向或纵向）
使用浏览器的window对象的onresize或onorientationchange事件进行处理。
Iphone两种都支持，但通常用onorientationchange；
Android和其他源自webkit的浏览器仅支持onresize；
BlackBerry设备针对docoment对象支持onresize。（但blackberry只有少数机子支持方向变更）。
参考：
Iphone的window.orientation属性的值：
-90：横向，屏幕以顺时针方向旋转。
0：纵向。默认的属性值
90：横向，逆时针方向旋转
180：纵向；上下翻转。目前暂时不支持。
2 移动浏览器中的WebKit
有一些专用的CSS扩展，基于webit的浏览器一般都可以使用这些扩展。
基于webkit的浏览器：
A 用于iphone的safari mobile
http://developer.apple.com/technologies/safari/
B 用于Android移动设备的浏览器（也是基于webkit）
C 用于Palm Pre的webOS浏览器；
D nokai S60第3版和第5版及以后。
3 其他浏览器：
以下浏览器实现的内核不一样，能实现的功能有所差异。
BlackBerry浏览器；
windows Mobile中的IE mobile浏览器；
Opera Mini（实际上是一个代码转换解决方案）；
Opera Mobile浏览器；
【页面优化】
1 最小化外部资源
2 删除空白、注释和不必要的标记（工具：YUI Compressor、JSMin等
3 对图像进行调整和转换
4 对于非智能手机，有些可以采用MIME多字节编码传输页面，类似于电子邮件封装。整个文档的所有资源分装到一个但服务器响应中。
5 Web服务器优化：
A gzip或deflate压缩（压缩文本内容html、css、js、xml、json等；图像、音频、视频等多媒体不需要压缩，因为这些文件格式中本身就存在压缩机制了）
B HTTP响应头中的缓存指令
【部署移动web站点】
如果使用相同的域的话，如何将访问自动路由到移动web站点或桌面站点：
1 程序判断（直接判断user-agent，完善的方案是结合设备数据库）
2 使用移动切换产品The Swither（http://www.passani.it/switcher/）或Apache Mobile Filter扩展
3 自己配置服务器路由规则。
【移动web站点SEO】
1 必须允许爬网程序（蜘蛛）访问移动web站点。
A 设备数据库一般都有识别主要搜索引擎的方法。
B 如果是自己定义的路由规则，或通过程序进行路由，则务必要考虑到爬网程序的访问。很多自定义的路由规则和程序路由往往将爬网程序排除在外。
2 在robots.txt中定义站点地图XML文件，且包含<mobile:mobile/>标签。
3 桌面web seo方法。
【移动web中的代码转换器】
代码转换器来源：
1 移动运营商
2 搜索引擎
3 部分移动浏览器提供的服务（如UC浏览器）。
解决方法：防御性编程。
1 将标记声明为移动友好。使用标准的文档声明(文档头信息，MIME类型等)
2 使用自引用链接关系，声明已经对移动设备进行了优化,如在test.mobi/1.php中增加
<link rel=”alternate” media=”handheld” href=”http://test.mobi/1.php” />
3 增加友好的移动优化META信息。如：
<meta name=”HandheldFriendly” value=”true”>
<meta name=”MobileOptimized” value=”320”>
4 使用响应头：
Cache-Control: no-transform （禁止转化）
Vary: User-Agent (代理或者转化服务器要重用缓存文档，必须根据User-Agent来进行，即缓存只针对提供相同User-Agent的设备进行响应)
5 使用较小的文档。如果有可能控制页面文档在15kb以下。
6 通过程序识别代码转换器：
A 使用设备数据库API提供的方法来识别。
B 自定义程序识别。含”X-Device”、”Via”、”X-Mobile-Gateway”的请求头等。
一般上面两种同时使用。因为设备数据库提供的方法很可能无法正确识别。
在识别了来自代码转换器的请求之后，可以采取相应的对策（如上面的方法4，发送特定的响应头信息）
