一、准备

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地址栏，然后你就可以看见页面加载成功并且显示如图所示的文字。

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

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

HTML5移动Web开发（二）——配置移动开发环境以及简单示例的更多相关文章

  1. IIS服务器 远程发布（Web Deploy）配置 VS2010 开发环境 Windows Server 2008服务器系统

    原文:IIS服务器 远程发布(Web Deploy)配置 VS2010 开发环境 Windows Server 2008服务器系统 asp.net 网站有三种常用的发布方式:分别是拷贝开发机上发布好的 ...

  2. 2017.2.20 activiti实战--第二章--搭建Activiti开发环境及简单示例（二）简单示例

    学习资料:<Activiti实战> 第一章 搭建Activiti开发环境及简单示例 2.5 简单流程图及其执行过程 (1)leave.bpmn 后缀名必须是bpmn.安装了activiti ...

  3. [二维码开发]二维码开发入门级demo

    最近开发一个项目,涉及到二维码开发,于是乎就到网上找下直接可用的资源,遇到两个问题: 1.网上资源不够完整,找到完整的资源,需要下载分,这个你知道的 2.ThoughtWorks.QRCode版本不对 ...

  4. Ubuntu18.04安装和配置Django，并实现简单示例

    一.前言(系统,django介绍,window.mac.linux简单区别) Django是python开发过程最重要的web框架.因为在看的Django教学视频是在mac下安装的,我自己用的是Lin ...

  5. A10 平板开发二搭建Android开发环境

    我是直接在Ubuntu 12.10 64位系统下操作的,搭建Ubuntu开发环境类似,见Ubuntu 10.04开发环境配置.需要注意的是,64位的系统,需要安装支持32位的库(sudo apt-ge ...

  6. activiti实战--第二章--搭建Activiti开发环境及简单示例

    (一)搭建开发环境 学习资料:<Activiti实战> 第一章 认识Activiti 2.1 下载Activiti 官网:http://activiti.org/download.html ...

  7. 2017.2.20 activiti实战--第二章--搭建Activiti开发环境及简单示例（一）搭建开发环境

    学习资料:<Activiti实战> 第一章 认识Activiti 2.1 下载Activiti 官网:http://activiti.org/download.html 进入下载页后,可以 ...

  8. Linux环境下proc的配置c/c++操作数据库简单示例

    在虚拟机上装了oracle11g数据库,原本想利用c/c++学习操作数据库.结果感觉摊上了一个大坑.从安装好oracle数据库到配置好proc的编译选项整整花了二天.但让我意识到自己自己几点薄弱:1. ...

  9. 如何使用vscode快速配置C语言环境（简单实用）

    需要用到的工具: VSCode(Visual Studio Code) 一.首先打开官网链接,然后根据自己的电脑选择合适的安装程序进行下载. 二.在安装时默认点击下一步,最后记得勾选上添加path到系 ...

随机推荐

  1. dlmalloc(Android bionic C库的malloc实现)简介

    欢迎转载opendevkit文章, 文章原始地址: http://www.opendevkit.com/?e=56 Dlmalloc是目前一个十分流行的内存分配器,其由Doug Lea从1987年开始 ...

  2. javascript event兼容性随笔

    一.前言 function ConvertEvent(e, element) { var event = e || window.event; var resultEvent = { event: e ...

  3. ORACLE索引失效原因归纳[转]

    1．隐式转换导致索引失效.这一点应当引起重视.也是开发中经常会犯的错误.   由于表的字段tu_mdn定义为varchar2(20),但在查询时把该字段作为number类型以where条件传给Orac ...

  4. 团队项目——站立会议DAY12

    第十二次站立会议记录: 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱 项目进展: 1.张靖颜:已经将部分代码完成,对一些模块化的功能进行扩展,对已具备的功能进行完善. 2.钟灵毓秀:对代码进行了修改 ...

  5. Macaca-iOS入门那些事

    Macaca-iOS入门那些事 一. 前言 最近有朋友向我请教iOS自动化测试框架选型,刚好前段时间做讲座时发现了macaca,遂试用.所以,下面的内容会只围绕Macaca的iOS部分. 二. Mac ...

  6. AngularJS快速入门指南18：Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

  7. Senparc.Weixin.MP SDK 微信公众平台开发教程（六）：了解MessageHandler

    上一篇<Senparc.Weixin.MP SDK 微信公众平台开发教程(五):使用Senparc.Weixin.MP SDK>我们讲述了如何使用Senparc.Weixin.MP SDK ...

  8. Redis学习笔记~Redis主从服务器，读写分离

    回到目录 Redis这个Nosql的存储系统一般会被部署到linux系统中,我们可以把它当成是一个数据服务器,对于并发理大时,我们会使用多台服务器充当Redis服务器,这时,各个Redis之间也是分布 ...

  9. Piwik延迟加载脚本

    piwik有时候会卡页面,为了不影响页面,可以将Piwik代码放到最后加载 <!-- Piwik --> <script type="text/javascript&quo ...

  10. linux 学习 常用命令

     以下命令是本人的CentOS6.5系统 一.linux个目录的作用 #linux个目录的作用 /bin 所有用户都可使用的命令 /sbin 超级用户(root)可以使用的命令 /boot 系统目录建 ...