一、准备

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. javascriptone

    var start=Date.now();document.write("<h1>This is a paragraph.</h1>");function ...

  2. UITextField 的重写

    在很多产品设计的时候,产品设计人员设计出来的输入框总会要求,文字的内容距离做边框多少像素,编辑区域的其实点,距离左边多少像素,很多人绝的难以适应!其实这些都不存在很大的技术难度,一下这些方式都可以达到 ...

  3. Android ExpandableListView

    ExpandableListView 结合SimpleExpandableListAdapter用法 最终实现效果: activity_main.xml <?xml version=" ...

  4. （转）Unity AssetBundle爬坑手记

    转自:http://www.cnblogs.com/ybgame/p/3973177.html 这篇文章从AssetBundle的打包,使用,管理以及内存占用各个方面进行了比较全面的分析,对Asset ...

  5. 基于ejbca构建独立ca系统

    ejbca,是一个CA(Certificate Authority)系统软件,CA是数字证书认证中心的简称,主要功能是管理数字证书,包括证书的颁发.销毁.更新等,ejbca实现了CA规范,因此可以用来 ...

  6. React Native也正式发布了

    var React = require('react-native'); var { TabBarIOS, NavigatorIOS } = React; var App = React.create ...

  7. Swift编程语言（中文版）官方手册翻译（进度8.8%）

    翻译着玩,进度会比较慢. 等不及的可以看CocoaChina翻译小组,他们正在组织翻译,而且人手众多,相信会提前很多完成翻译. 原文可以在iTunes免费下载 目前进度 7 JUN 2014: 8.8 ...

  8. SQL Server认证培训与考试

    Microsoft 技术专员 (MTA) - 数据库 https://www.microsoft.com/zh-cn/learning/mta-certification.aspx MCSA: SQL ...

  9. Javascript图片裁切

    最近浏览了不少网站的图片裁切效果,大部分的做法如下图所示(借用一张脚本之家的图片),通过改变裁切框的大小来选取合适的位置. 但本文介绍的是另外一种裁切方式,裁切框由开发者决定,图片大小由用户决定,通过 ...

  10. ubuntu 安装 axel

    Axel 通过打开多个 HTTP/FTP 连接来将一个文件进行分段下载,从而达到加速下载的目的.对于下载大文件,该工具将特别有用. 安装:sudo apt-get install axel 一般使用: ...