一、准备

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. CCNA第三章子网划分,变长子网掩码(VLSM)和TCP/IP排错考试要点学习笔记

    1. 子网划分的好处      缩减网络流量; 优化网络性能; 简化管理; 可以更为灵活地形成大覆盖范围的网络.    2. 如何创建子网的步骤 首先,确认所需要的网络ID数; 其次,确认每个子网中所 ...

  2. STL练习题

    //hdu_2717 //map 一对多映射,基于关键字快速查找,不允许重复值 //queue 队列 先进先出 #include<iostream> #include<cstdio& ...

  3. java jstack命令详解

    名称jstack: stack trace 摘要: jstack [ option ] pid jstack [ option ] executable core jstack [ option ] ...

  4. 解决web中的乱码

    统一使用utf-8进行编码数据库的编码格式也是utf-8 对于页面post传过来的不会出现乱码 对于页面get 传过来值解决乱码 方法一:在业务层:userName = new String(user ...

  5. 【转】各种语言中的urlencode方法

    URLENCODE和URLDECODE是比较常用的URL参数转换方法,为以后使用方便,自己归类一下.   原文地址:http://blog.sina.com.cn/s/blog_3f195d25010 ...

  6. 【源码分享】WPF漂亮界面框架实现原理分析及源码分享

    1 源码下载 2 OSGi.NET插件应用架构概述 3 漂亮界面框架原理概述 4 漂亮界面框架实现  4.1 主程序  4.2 主程序与插件的通讯   4.2.1 主程序获取插件注册的服务   4.2 ...

  7. 在Nifi 里 把 HDFS Json 为csv 格式

    import org.apache.commons.io.IOUtilsimport java.nio.charset.*import java.text.SimpleDateFormatimport ...

  8. Http规范

    1. 关于 HTTP Basic Authentication http://blog.itpub.net/23071790/viewspace-709367/ 通过以下代码,提示用户登录 Respo ...

  9. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  10. 初识canvas,使用canvas做一个百分比加载进度的动画

    canvas作为H5中重要的新增特性,使开发者可以用它来创作各种令人惊叹的作品.先来看一下浏览器对canvas的支持情况. <canvas> 标签定义图形,比如图表和其他图像,我们使用脚本 ...