1.5 初识移动Web开发技术
下面再来说说移动Web开发中应该首先知道的一些技术问题。
1.5.1 移动Web设计
1．移动设备统计分析
拥有全面的用户数据，无疑能帮助我们做出更符合用户需求的产品。内部数据能帮我们精确了解目标用户群的特征；而外部数据能告诉我们大环境下的手机用户状况，并且能在内部数据不够充分的时候给予一些非常有用的信息。
从外部数据来看，国内浏览器品牌市场占有率前三甲的分别为苹果Safari、谷歌Android、Opera Mini。当然，作为中国的Web移动应用开发者，不能忽视强大的山寨机市场，这类手机通常使用的是MTK操作系统。国内易观智库发布数据显示：QQ浏览器、UC浏览器及百度浏览器占据中国第三方手机浏览器市场前三名。
2．手机浏览器兼容性测试结果概要
以下所说的“大多数”是指在测试过的机型中，发生此类状况的手机占比达50%及以上，“部分”为20%~50%，“少数”为20%及以下。而这个概率也只限于所测试过的机型，虽然这里采集的样本尽量覆盖各种特征的手机，但并不代表所有手机的情况。
1）HTML部分
①大多数手机不支持的特性：表单元素的disable属性。
②部分手机不支持的特性如下。
button标签。
input[type= file]标签。
iframe标签。
虽然只有部分手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。
③少数手机不支持的特性：select标签。
该标签如果被赋予比较复杂的CSS属性，可能会导致显示不正常，如vertical-align:middle。
2）CSS部分
①大部分手机不支持的特性如下。
font-family属性：因为手机基本上只安装了宋体这一种中文字体。
font-family:bold;：对中文字符无效，但对英文字符一般是有效的。
font-style: italic;：对中文字符无效，但对英文字符一般是有效的。
font-size属性：如果12px的中文和14px的中文看起来几乎一样大，但是字符大小为18px的时候也许就能看出来一些区别。
white-space/word-wrap属性：无法设置强制换行，所以当网页有很多中文的时候，需要特别关注不要让过多连写的英文字符撑开页面。
background-position属性：虽然该属性不被支持，但背景图片的其他属性设定是支持的。
position属性。
over flow属性。
display属性。
min-height和min-width属性。
②部分手机不支持的特性如下。
height属性：对height的支持不太好。
padding属性。
margin属性：更高比例的手机不支持margin的负值。
③少数手机不支持的特性：少数手机对CSS完全不支持。
3）JavaScript部分
部分手机支持基本的DOM操作、事件等。支持（包括不完全支持）JavaScript的手机比例大约在一半左右。当然，对于开发人员来说，最重要的不是这个比例，而是要如何做好JavaScript的优雅降级。
4）其他部分
部分手机不支持png8和png24，所以尽量使用jpg和gif格式的图片。
对于平滑的渐变等精细的图片细节，部分手机的色彩支持度并不能达到要求，所以慎用有平滑渐变的设计。
部分手机对于超大图片，既不进行缩放，也不显示横向滚动条。
少数手机在打开超过20k大小的页面时，会显示内存不足。
3．开发中可能遇到的问题
下面是开发人员可能遇到的问题
（1）手机网页编码需要遵循的规范
XHTML Mobile Pro file规范（WAP-277-XHTMLMP-20011029-a.pdf），简称为XHTML MP，也就是通常说的WAP2.0规范。XHTMLMP是为不支持XHTML的全部特性且资源有限的客户端所设计的。它以XHTML Basic为基础，加入了一些来自XHTML 1.0的元素和属性。这些内容包括一些其他元素和对内部样式表的支持。与XHTML Basic相同，XHTML MP是严格的XHTML 1.0子集。
（2）网页文档推荐使用的扩展名
推荐命名为xhtml，按WAP2.0的规范标准写成html/htm等也是可以的。但少数手机对html支持得不好。
（3）现今大多数网站中一行字数上限为14个中文字符的原因
由于手持设备的特殊性，其页面中实际文字大小未必是我们在CSS中设定的文字大小。尤其是第三方浏览器，如Nokia5310，其内置浏览器页面内文字大小与CSS设定相符，但是第三方浏览器OperaMini与UCWEB页面内文字大小却大于CSS设定。经测试，其文本大概在16px左右。假如屏幕分辨率宽度为240px，去除外边距，那么一行显示14个字以内是比较保险（避免文本换行）的做法。
（4）使用WCSS还是CSS
WCSS（WAP Cascading Style Sheet或称WAP CSS）是移动版本的CSS样式表。它是CSS2的一个子集，去掉了一些不适于移动互联网特性的属性，并加入一些具有WAP特性的扩展（如-wap- input-format/-wap-input-required/display:-wap-marquee等）。需要留意的是，这些特殊的属性扩展并不是很实用，所以在实际的项目开发中，不推荐使用WCSS特有的属性。
（5）避免空值属性
如果属性值为空，在Web页面中是完全没有问题的，但是在大部分手机网页上会报错。
（6）网页大小限制
建议低版本页面不超过15k，高版本页面不超过60k。
（7）用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是否可靠
有条件的话，建议在手机实体上进行测试。因为目标客户群的手机设备总是在不断变化的，这些手机模拟器通常不能完全正确地模拟页面在手机上的显示情况，如图片色彩、页面大小限制等就很难在模拟器上测试出来。当然，一些第三方手机浏览器的在线模拟器还是可以进行测试的，第三方浏览器相对来说受手机设备的影响较小。
1.5.2 关于WebKit
WebKit是一种浏览器引擎，支撑着苹果（iOS）和安卓（Android）两大主流移动系统的内置浏览器。WebKit是一个开源项目，催生了面向移动设备的现代Web应用程序。WebKit还应用在桌面Safari浏览器内，该浏览器是Mac OS平台默认的浏览器。
WebKit优先支持HTML和CSS特性。实际上，WebKit还支持尚未被其他浏览器采纳的一些CSS样式和HTML5特性。HTML5规范是一个技术草案集，涵盖了各种基于浏览器的技术，包括客户端SQL存储、转变、转型和转换等。HTML5的出现已经有一段时间了，虽然尚未完成，但是一旦其特性集因主要浏览器平台支持的加入而逐渐稳定后，Web应用程序的简陋开端将成为永久的记忆。Web应用程序开发将成为主导，移动将一跃成为首选，而不再是后备之选。
WebKit是HTML+CSS精致的解析引擎，再配以iPhone和Android平台上的高度直观的UI。实际上就使得几乎任何一个基于HTML的Web站点都能呈现在此设备上。Web页能被正确呈现，不会再有原来的移动浏览器那种体验（内容被包裹起来或是根本不显示）。
页面加载后，内容通常被完全缩放以便整个页面都可见，但内容会被缩放得非常小，甚至不可读，如图1.2所示。不过，页面是可滚动、放大、缩小的，这就提供了对全部内容的访问。浏览器默认地使用980px宽的视见区或逻辑尺寸。
虽然网页可以在WebKit中正确呈现，但是，一个以鼠标为中心的设备（如笔记本或台式机）与一个以触摸为中心的设备（如iPhone或Android智能手机）还是有区别的。其中主要的差异包括“可单击”区域的物理大小、“悬浮样式”的缺少以及完全不同的事件顺序。如下面所列出的是在设计一个能被移动用户正常查看的Web站点时需要注意的一些事项。
iPhone/Android浏览器呈现的屏幕是可读的，大大好于传统的移动浏览器，所以不要急于制作网站的移动版本。
手指要大过鼠标指针。在设计可单击的导航时要特别注意这一点。不要把链接相互放得太靠近，因为用户不太可能单击了一个链接而不触及相邻的链接。
悬浮样式将不再奏效，因为手指不能完成鼠标指针进行的“悬浮”。
与mouse-down、mouse-move等相关的事件在基于触摸的设备上会有所不同。这类事件中有一些将被取消，另外不要指望移动设备上的事件顺序与桌面浏览器上的一样。
要使一个Web站点对iPhone或Android用户具有友好性，面临的最为明显的一个挑战就是屏幕大小。本节使用的实际移动屏幕尺寸是320px×480px。由于用户可能会选择横向查看Web内容，所以屏幕大小也可以是480px×320px。
WebKit能很好地呈现面向桌面的Web页面。但是文本可能会太小以至于若不进行缩放或其他操作，就无法有效阅读内容。那么，该如何应对这个问题呢？
最为直观也是最不唐突的适合移动用户的方式是使用一个特殊的视口标记。<meta>标签是一个放入HTML文档的<head>标签的HTML标记。下面是一个使用viewport标记的简单例子：
<meta name="viewport" content="width=device-width" />
这个<meta>标签被添加到一个HTML页面后，此页面被缩放到更为适合这个移动设备的大小，如图1.3所示。如果浏览器不支持此标记，它会简单地忽略此标记。
图1.2 页面被缩放的效果
图1.3 页面放大显示的效果
为了设置特定的值，将viewport metatag的content属性设为一个显式的值：
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />
改变初始值，屏幕就可以按要求被放大或缩小。将值分别设置在1.0~1.3对于iPhone和Android平台是比较合适的。viewport metatag还支持最小和最大伸缩，可用来限制用户对呈现页面的控制力。
随着来自不同制造商、针对不同用户群的更多设备的出现，Android有望具备更多样的物理特点。在开发应用程序并以Android这类移动设备为目标时，开发人员一定要考虑屏幕尺寸、形态系数以及分辨率方面的潜在多样性。