HTML5移动Web开发(二)——配置移动开发环境以及简单示例

一、准备

1.配置本地网络服务。对于Windows、Mac和Linux,最容易的方法是使用免费的XAMPP软件:http://www.apachefriends.org/en/index.html

  XAMPP下载:http://pan.baidu.com/s/1nt2APCH  提取码:94ui

  XAMPP安装和配置:http://jingyan.baidu.com/article/48a42057bda4d0a9242504b8.html

  XAMPP使用教程:http://wenku.baidu.com/link?url=XZUnoux92TbXzs96DrKMzQwY87mnA4HS9kfJipxlsHDmQy5ZCHnXPeldDs41ShB8YlJs4m0fD6E_rb4Vc31NPHAsjCFoTx93L09WeZyfn8W

  你的站点的根目录为xampp目录下的htdocs文件夹。你可以在htdocs目录下创建任意一个站点。例如将test.html放在\xampp\htdocs\new路径下,你就可以在浏览器的地址栏中输入localhost/new/test.html来访问这个文件。

2.确认你有无线网络。

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

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

二、实践

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

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<header>
Main navigation here
</header>
body content here.
<footer>
Footer links here
</footer>
</body>
</html>

2.获取你的IP地址,把它输入到移动浏览器的URL地址栏,然后你就可以看见页面加载成功并且显示如图所示的文字。

HTML5移动Web开发(二)——配置移动开发环境以及简单示例

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

使用桌面版Safari测试(如果你的主要用户使用iPhone和移动版Safari,在桌面上测试可以节省很多时间)

上一篇:Docker简介与安装


下一篇:erlang学习笔记(1)