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地址栏,然后你就可以看见页面加载成功并且显示如图所示的文字。
同一个局域网中,你的移动设备可以通过IP地址以访问桌面电脑作为主机的服务器。
使用桌面版Safari测试(如果你的主要用户使用iPhone和移动版Safari,在桌面上测试可以节省很多时间)
HTML5移动Web开发(二)——配置移动开发环境以及简单示例的更多相关文章
- IIS服务器 远程发布(Web Deploy)配置 VS2010 开发环境 Windows Server 2008服务器系统
原文:IIS服务器 远程发布(Web Deploy)配置 VS2010 开发环境 Windows Server 2008服务器系统 asp.net 网站有三种常用的发布方式:分别是拷贝开发机上发布好的 ...
- 2017.2.20 activiti实战--第二章--搭建Activiti开发环境及简单示例(二)简单示例
学习资料:<Activiti实战> 第一章 搭建Activiti开发环境及简单示例 2.5 简单流程图及其执行过程 (1)leave.bpmn 后缀名必须是bpmn.安装了activiti ...
- [二维码开发]二维码开发入门级demo
最近开发一个项目,涉及到二维码开发,于是乎就到网上找下直接可用的资源,遇到两个问题: 1.网上资源不够完整,找到完整的资源,需要下载分,这个你知道的 2.ThoughtWorks.QRCode版本不对 ...
- Ubuntu18.04安装和配置Django,并实现简单示例
一.前言(系统,django介绍,window.mac.linux简单区别) Django是python开发过程最重要的web框架.因为在看的Django教学视频是在mac下安装的,我自己用的是Lin ...
- A10 平板开发二搭建Android开发环境
我是直接在Ubuntu 12.10 64位系统下操作的,搭建Ubuntu开发环境类似,见Ubuntu 10.04开发环境配置.需要注意的是,64位的系统,需要安装支持32位的库(sudo apt-ge ...
- activiti实战--第二章--搭建Activiti开发环境及简单示例
(一)搭建开发环境 学习资料:<Activiti实战> 第一章 认识Activiti 2.1 下载Activiti 官网:http://activiti.org/download.html ...
- 2017.2.20 activiti实战--第二章--搭建Activiti开发环境及简单示例(一)搭建开发环境
学习资料:<Activiti实战> 第一章 认识Activiti 2.1 下载Activiti 官网:http://activiti.org/download.html 进入下载页后,可以 ...
- Linux环境下proc的配置c/c++操作数据库简单示例
在虚拟机上装了oracle11g数据库,原本想利用c/c++学习操作数据库.结果感觉摊上了一个大坑.从安装好oracle数据库到配置好proc的编译选项整整花了二天.但让我意识到自己自己几点薄弱:1. ...
- 如何使用vscode快速配置C语言环境(简单实用)
需要用到的工具: VSCode(Visual Studio Code) 一.首先打开官网链接,然后根据自己的电脑选择合适的安装程序进行下载. 二.在安装时默认点击下一步,最后记得勾选上添加path到系 ...
随机推荐
- CCNA第三章子网划分,变长子网掩码(VLSM)和TCP/IP排错考试要点学习笔记
1. 子网划分的好处 缩减网络流量; 优化网络性能; 简化管理; 可以更为灵活地形成大覆盖范围的网络. 2. 如何创建子网的步骤 首先,确认所需要的网络ID数; 其次,确认每个子网中所 ...
- STL练习题
//hdu_2717 //map 一对多映射,基于关键字快速查找,不允许重复值 //queue 队列 先进先出 #include<iostream> #include<cstdio& ...
- java jstack命令详解
名称jstack: stack trace 摘要: jstack [ option ] pid jstack [ option ] executable core jstack [ option ] ...
- 解决web中的乱码
统一使用utf-8进行编码数据库的编码格式也是utf-8 对于页面post传过来的不会出现乱码 对于页面get 传过来值解决乱码 方法一:在业务层:userName = new String(user ...
- 【转】各种语言中的urlencode方法
URLENCODE和URLDECODE是比较常用的URL参数转换方法,为以后使用方便,自己归类一下. 原文地址:http://blog.sina.com.cn/s/blog_3f195d25010 ...
- 【源码分享】WPF漂亮界面框架实现原理分析及源码分享
1 源码下载 2 OSGi.NET插件应用架构概述 3 漂亮界面框架原理概述 4 漂亮界面框架实现 4.1 主程序 4.2 主程序与插件的通讯 4.2.1 主程序获取插件注册的服务 4.2 ...
- 在Nifi 里 把 HDFS Json 为csv 格式
import org.apache.commons.io.IOUtilsimport java.nio.charset.*import java.text.SimpleDateFormatimport ...
- Http规范
1. 关于 HTTP Basic Authentication http://blog.itpub.net/23071790/viewspace-709367/ 通过以下代码,提示用户登录 Respo ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- 初识canvas,使用canvas做一个百分比加载进度的动画
canvas作为H5中重要的新增特性,使开发者可以用它来创作各种令人惊叹的作品.先来看一下浏览器对canvas的支持情况. <canvas> 标签定义图形,比如图表和其他图像,我们使用脚本 ...