建议可以从入门的程度选择,如果是一点都没有接触过,建议选择《HTML5移动Web开发指南》;如果是了解过原理以及一些常识《HTML5移动应用开发入门经典》更加偏向于实战案例讲解入门:
选择哪一本书,主要是根据读者现在自身的情况和讲解的内容来进行判断,两本书的内容简介如下:
一、《HTML5移动Web开发指南》本书主要围绕HTML5技术,讲述如何利用HTML5相关技术开发移动Web网站和Web App应用程序。本书共分为四大部分:
1、第一部分主要讲述Web技术的发展及HTML5标准在移动Web技术中的应用;
2、第二部分主要介绍HTML5的新功能和新特性如何在移动设备浏览器中使用及相关展望;
3、第三部分主要介绍比较流行的两套JavaScript移动开发框架jQuery Mobile、Sencha ;Touch,以及PhoneGap,并配备丰富的例子作为实践;
4、第四部分主要结合Sencha Touch框架库和HTML5技术构建进行讲解,旨在帮助读者将HTML5技术运用于实践之中。
二、《HTML5移动应用开发入门经典》总共分为24章,以示例的方式对如何使用HTML5及相关技术进行移动应用开发做了全面而细致的介绍。
1、《HTML5移动应用开发入门经典》首先讲解了HTML5的起源以及它为什么适用于移动设备,然后讲解了HTML5的基本元素以及所做的改进、canvas(画布)、视音频、微格式、微数据、拖曳等新增特性;
2、还讲解了WebSocket、WebWorkers、Web存储、离线Web应用程序、地理定位等新增的API。同时,《HTML5移动应用开发入门经典》还针对不同平台(如iOS、BlackBerry、Android)的移动设备、不同的浏览器,就如何开发高可用性的移动应用程序进行了讲解。
1、打开手机web检查器。
通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图(点击查看大图),并且你会看到该选项下面对电脑操作的相应描述,照做就好。
2、链接电脑(Mac)
2.1 先在手机Safari中打开你想调试的网页,并用数据线连接到电脑(我这里是Mac)
2.2 再在电脑上打开Safari点击【Develop】菜单,就会看到如下图所示(点击查看大图):
2.3 点击2.2中的网站名就会在电脑上打开Safari的控制台,如下图(点击查看大图):
3.调试网页
此时你可以查看手机网页的DOM结构,并且和电脑端网页调试无异,当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来,如下图(点击查看大图):