天天看点

《HTML5移动Web开发实战》—— 1.5 配置移动开发环境

本节书摘来异步社区《html5移动web开发实战》一书中的第1章,第1.5节,作者:石川,更多章节内容可以访问云栖社区“异步社区”公众号查看。

html5移动web开发实战

适用浏览器:所有

在开始移动网站开发之前,我们必须首先配置好开发环境。

1.5.1 准备

1.配置本地网站服务。对于windows、mac和linux,最容易的方法是使用免费的xampp软件:

2.确认你有无线网络。

3.同时你需要一个移动设备,或者是移动设备的仿真器、模拟器。

4.确保你的移动设备和电脑在同一无线网络中。

1.在你的本地服务器根目录中创建一个html文件并命名为ch01e1.html,在其中输入如下代码:

《HTML5移动Web开发实战》—— 1.5 配置移动开发环境

2.获取你的ip地址。如果你使用的是windows,你可以在命令行中输入如下命令:

《HTML5移动Web开发实战》—— 1.5 配置移动开发环境

3.当你获取到你的ip地址(如192.168.1.16),把它输入到移动浏览器的url地址栏,然后你就可以看见页面加载成功并且显示图1-3所示的文字。

《HTML5移动Web开发实战》—— 1.5 配置移动开发环境

在同一个局域网中,你的移动设备可以通过ip地址访问以桌面电脑作为主机的服务器。

如果你没有移动设备,你可以使用某个仿真器来测试,但建议至少有一两个真实设备来测试。仿真器可以测试到大部分的情况,但不是所有的。

使用桌面版safari测试

如果你的主要用户使用iphone和移动版safari,在桌面电脑上测试可以节约很多时间:打开safari,在偏好设置中单击高级栏打开,在菜单栏中显示“开发”菜单,如图1-4所示。

《HTML5移动Web开发实战》—— 1.5 配置移动开发环境

在本页面中选择开发 | 用户代理 | mobile safari 3.1.3 – iphone:

社区搜集的仿真器、模拟器

如果你没有智能手机,也可以使用很多仿真器、模拟器,你可以在mobile boilerplate项目的wiki页面找到:

fritman搜集的仿真器、模拟器

maximiliano firtman,一个移动网站开发人员和作家,他维护了一个仿真器列表:

继续阅读