本文转自：http://www.apkbus.com/android-16708-1-1.html

通俗的讲，就是为移动设备开发网页。伴随着3G时代的到来、浏览器技术的不断进步，越来越多的人开始离开PC，使用手中的移动设备（手机、PSP、平板）上网。如果您是一个注意生活细节的人，那么在您乘坐地铁、公交的时候，请认真看看你周围的人都在干什么？是不是每人抱着一个手机在听音乐、看新闻、聊天呢？

        作为一个开发人员，如何开发出更适合于移动设备的网页呢？如何让您的站点能被多数移动设备更轻松地访问？本系列文章将会一一的为您解答。
        当今最受欢迎的手机系统包括 Android，iPhone ，Symbian，BlackBerry 与Web OS。这些系统浏览器都是基于webkit核心，而webkit号称是一款全功能的移动浏览器，支持 HTML + CSS + JavaScript，但由于移动设备本身与PC的差异，导致我们开发的网页在移动设备上总是会存在一些不如人意的地方。
        首先我们要接触的第一个概念就是“viewport”，翻译为中文可以叫做“视区”，大家都知道移动设备的屏幕一段都比PC小很多，webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上，默认的虚拟窗口为980像素宽（目前大部分网站的标准宽度），然后按一定的比例（3：1或2：1）进行缩放。也就是说当我们加载一个普通网页的时候，webkit会先以980像素的浏览器标准加载网页，然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小，也就是页面上的所有元素都会缩小。如下图所示，一个普通的文章页面在移动设备的效果：
<ignore_js_op>
        页面以980像素加载，没为变形，但是按比例缩放后，已经没有多少东西是可以用肉眼看清的了，好在一般的移动设备都支持屏幕放大。放大之后，我们才能看清屏幕上的内容。
        怎么样，对viewport的概念有一定的了解了吧？那么我们能不能人为改变webkit的视区呢？当然能，在<head>与</head>之间加上如下视区代码：
  1. <meta name="viewport" content="width=500" />
我们来看看页面加上强制视区大小命令后效果怎么样？ 如下图所示：
<ignore_js_op>

怎么样？是不是好了很多？那么有没有更好的方法呢？比如说我们自动检测移动设备屏幕大小，然后让内容自适应。很简单，看来面的代码：
  1. <meta name="viewport" content="width=device-width" />

<ignore_js_op>

device-width将自动检测移动设备的屏幕宽度。
怎么样？满意了吧？所有页内容都和移动设备屏幕自适应。
下面我们以一个列表页面为例，讲解一下如何让我们开发的页面能够在移动设备上完美的呈现。原始页面台下图所示： <ignore_js_op>
代码如下所示：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="user-scalable=no,width=device-width" />
<title>列表</title>
</head>
<body>
<div id="header">
<h1><a href="#">移动web列表演示</a></h1>
</div>
<div id="nav">
<ul id="taskList">
<li><a href="pre.html">准备会议资料</a></li>
<li><a href="webmeeting.html">参加关于移动web开发的技术讨论会</a></li>
<li><a href="meetingjack.html ">会见客户Jack</a></li>
 <li><a href="designdoc.html">整理XX系统设计文档</a></li>
</ul>div>
<div id="container"></div>
<div id="footer"><span>Copyright © 2010-2015 IdeasAndroid.
All rights reserved.</span></div>
</body>
</html>

下面，我们介绍一个简单的概念，大家知道，我们开发的web页面需要在不同的设备上显示，我们需要在不同的设备上使用不同的样式表(CSS)，才能让我们的页面显示的更完美。比如说我们开发的页面需要在手机和平板电脑上使用不同的CSS，那么代码如下所示：

<link rel="stylesheet" type="text/css" href="android.css"

media="only screen and (max-width: 480px)" />

<link rel="stylesheet" type="text/css" href="tab.css"

media="screen and (min-width: 481px)" />

这里media属性就是根据屏幕属性选择不同的CSS，第一个的意思是，只有在屏幕宽度小于480px的时候使用android.css文件，第二个的意思是当屏幕大于481px时，使用tab.css文件。我们来看看android.css文件：

@CHARSET "UTF-8";

body {

background-color: #ddd;
color: #222;
font-family: Helvetica;
font-size: 14px;
margin: 0;
padding: 0;
}

#header h1 {

margin: 0;
padding: 0;
}

#header h1 a {

background-color: #ccc;
border-bottom: 1px solid #666;

color: #222;
display: block;
font-size: 20px;
font-weight: bold;
padding: 10px 0;
text-align: center;
text-decoration: none;

<!–给标题增加1个像素白色的阴影，同时增加一个渐变背景 –>

text-shadow: 0px 1px 1px #fff;

background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc),

to(#999) );

}

#container{
padding: 10px 10px;
}

#nav ul {

list-style: none;
margin: 8px;
padding: 0;
}

#nav ul li a {

background-color: #FFFFFF;

border: 1px solid #999999;
color: #222222;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
}

/*

* 给列表第一项增加圆角效果

*/

#nav ul li:first-child a {

-webkit-border-top-left-radius: 6px;

-webkit-border-top-right-radius: 6px;

}

/*
* 给列表最后一项增加圆角效果
*/
#nav ul li:last-child a {
 -webkit-border-bottom-left-radius: 6px;
 -webkit-border-bottom-right-radius: 6px;
}

#footer {

display: block;
padding: 10px 10px;
}

和普通页面一样，我们只是增加了适用于移动设备的背景渐变、阴影效果，还给列表的第一项上方和列表最后一项上方增加了圆角效果，最终效果如下图所示：
<ignore_js_op>

怎么样？在手机上是不是很漂亮？对于平板电脑使用的css,我们这里仅改变了一下背景颜色，在平板电脑上使用tab.css最终效果如下所示：
<ignore_js_op>

最后我们来完善一下我们的列表页面，使用jquery的ajax加载列表详细内容。最后实现的效果就是单击列表任意一项，如下所示：
<ignore_js_op>

在我们的css文件中，增加返回按钮样式，代码如下所示：
  1. #header div.leftButton {
  2. font-weight: bold;
  3. text-align: center;
  4. line-height: 28px;
  5. color: white;
  6. text-shadow: 0px -1px 1px rgba(0,0,0,0.6);
  7. position: absolute;
  8. top: 7px;
  9. left: 6px;
  10. max-width: 50px;
  11. white-space: nowrap;
  12. overflow: hidden;
  13. text-overflow: ellipsis;
  14. border-width: 0 8px 0 14px;
  15. -webkit-border-image: url(images/back_button.png) 0 8 0 14;
  16. -webkit-tap-highlight-color: rgba(0,0,0,0);
  17. }
  18. #header div.leftButton.clicked {
  19. -webkit-border-image: url(images/back_button_clicked.png) 0 8 0 14;
  20. }

复制代码

　　增加js文件android.js，代码如下所示：
  1. var hist = [];
  2. $(document).ready(function(){
  3. $('#nav a').click(function(e){
  4. e.preventDefault();
  5. loadPage(e.target.href);
  6. });
  7. loadPage("null");
  8. });
  9. function loadPage(url) {
  10. $('#container').load(url, function(result){
  11. if(url=='null'){
  12. $('#nav').show();
  13. }else{
  14. $('#nav').hide();
  15. }
  16. var title = $('h2').html() || '<a>移动web列表演示</a>';
  17. $('h1').html(title);
  18. $('h2').remove();
  19. $('.leftButton').remove();
  20. hist.unshift({'url':url, 'title':title});
  21. if (hist.length > 1) {
  22. $('#header').append('<div class="leftButton">返回</div>');
  23. $('#header .leftButton').click(function(e){
  24. $(e.target).addClass('clicked');
  25. var thisPage = hist.shift();
  26. var previousPage = hist.shift();
  27. loadPage(previousPage.url);
  28. });
  29. };
  30. });
  31. }

复制代码

实现所有功能后列表页面完整的代码如下所示：
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <meta name="viewport" content="user-scalable=no,width=device-width" />
  5. <link rel="stylesheet" type="text/css" href="assets/css/android.css"
  6. media="only screen and (max-width: 480px)" />
  7. <link rel="stylesheet" type="text/css" href="assets/css/tab.css"
  8. media="screen and (min-width: 481px)" />
  9. <link rel="apple-touch-icon-precomposed" href="homeIcon.png" />
  10. <script type="text/javascript" src="assets/js/jquery.js"></script>
  11. <script type="text/javascript" src="assets/js/android.js"></script>
  12. <title>列表</title>
  13. </head>
  14. <body>
  15. <div id="header">
  16. <h1><a href="#">移动web列表演示</a></h1>
  17. </div>
  18. <div id="nav">
  19. <ul id="taskList">
  20. <li><a href="pre.html">准备会议资料</a></li>
  21. <li><a href="webmeeting.html">参加关于移动web开发的技术讨论会</a></li>
  22. <li><a href="meetingjack.html">会见客户Jack</a></li>
  23. <li><a href="designdoc.html">整理XX系统设计文档</a></li>
  24. </ul>
  25. </div>
  26. <div id="container"></div>
  27. <div id="footer"><span>Copyright © 2010-2015 IdeasAndroid.
    All rights reserved.</span></div>
    </body>
    </html>
如上代码中，我们增加了一行灰色底色的代码：
  1. <link rel="apple-touch-icon-precomposed" href="homeIcon.png" />
这段代码的作用是在android手机增加web快捷方式的到home主页时显示的图标。

　　好了，最后总结一下我们进行android手机web开发的几个关键的东西：
　　1、 viewport(视区)。
　　2、 css文件自适应。
　　3、 增加渐变、阴影、圆角等适用于移动设备的效果。
　　4、 快捷方式图标：apple-touch-icon-precomposed。
　　androidweb开发涉及到的东西还很多，本文仅是简单的介绍一点入门知识，更多的内容还需要自己去实践，去学习。希望本文对您有所帮助。

[转]Android web开发快速入门相关推荐

  1. Android应用开发-快速入门

    内容摘要 了解Android 操作系统 搭建Android 开发工具 使用Android 模拟器 案例-电话拨号器/短信发送器 掌握点击事件的四种实现方式 掌握Android 常见布局 了解Andro ...

  2. android java教程_[Java教程]Android开发快速入门

    [Java教程]Android开发快速入门 0 2020-12-22 18:01:40 Xamarin.Android 应用程序剖析 以下屏幕截图列出了解决方案的内容. 下面是一个解决方案资源管理器, ...

  3. OUYA游戏开发快速入门教程第1章了解OUYA及其设备

    OUYA游戏开发快速入门教程第1章了解OUYA及其设备 OUYA是基于Andorid系统的游戏主机.围绕OUYA游戏机,已经形成一个完整的生态圈.在国外,OUYA已经成为知名的游戏平台.本章会站在玩家 ...

  4. OUYA游戏开发快速入门教程

     OUYA游戏开发快速入门教程 试读地址:http://pan.baidu.com/s/1o63a3W2 本教程是国内唯一OUYA游戏开发教程.本教程基于Unity全面讲解OUYA游戏开发方式.内容包 ...

  5. WebService 理论详解、JWS(Java Web Service) 快速入门

    目录 WebService (web服务)概述 WebService 平台技术 WebService 工作原理 WebService 开发流程 常见 Web Service 框架 JWS(Java W ...

  6. 「译」Web安全快速入门

    Web安全快速入门 ──几个Web开发人员必知的安全缩略语 原文:A quick introduction to web security 作者:Austin Tackaberry 发表时间:2018 ...

  7. 《 Android物联网开发从入门到实战》

    今天小编分享的这本书是国内第一本Android物联网开发书籍,由42个全真实战案例,环环相扣,深入解析Android物联网开发. <Android物联网开发从入门到实战>内容分为 5篇,共 ...

  8. 微信小程序开发快速入门

    最近整理文件,找到一个18年写的微信小程序开发快速入门,对于新手还是值得一看的,三年多过去了,可能一些接口已经更新了,不过,整体思想还是没变的. 如果你熟悉JavaScript,那你基本上看完这个文档 ...

  9. 《 Android物联网开发从入门到实战》国内第一本开发书籍！

    今天小编分享的这本书是国内第一本Android物联网开发书籍,由42个全真实战案例,环环相扣,深入解析Android物联网开发. <Android物联网开发从入门到实战>内容分为 5篇,共 ...

最新文章

  1. php mysql study_phpStudy 升级 MySQL5.7
  2. IMDB是否提供API？ [关闭]
  3. Intel Realsense D435 奇怪的现象记录：帧卡住，但wait_for_frame()不报错
  4. spring14-----AOP之通知参数
  5. C语言满分代码：1018 锤子剪刀布 (20分)（解题报告）
  6. 底量超顶量超级大黑马指标源码_一旦出现底量超顶量形态，是超级大黑马诞生！...
  7. CV Code | 计算机视觉开源周报 20190604期
  8. HMM隐马尔可夫模型（HMM）攻略
  9. 获取图层字段的唯一值集合（ArcEngine）
  10. GitHub上整理的一些工具[转载]
  11. log4j的详细配置（最省心完美配置）
  12. 关于RabbitMQ启动慢问题的解决方法
  13. 中国Blog现状和发展初探
  14. 第二章---《实时语音处理实践指南》发音机理与器件学习笔记
  15. 数据结构编程实践（七）创建哈夫曼树、生成哈夫曼编码、完成图片的压缩与解压缩
  16. elasticsearch xpack license过期
  17. MR案例（1）词频统计
  18. 金融行业的数据分析怎么做？
  19. django orm querset 多表查询
  20. java 日期处理类

热门文章

  1. python语言发展历时_编程语言十年发展史
  2. 哪里有高中教师教学计算机能力培训,04060406_王世红_高中教师信息技术能力的培训.doc...
  3. oracle 查看白名单,oracle配置访问白名单教程
  4. c#+web与php,将Web服务客户端从c#转换为php
  5. mysql union
  6. nginx 小简单指令
  7. 前端-requests-flask对应关系 form
  8. hadoop jar
  9. 图像识别 RGB HSV
  10. java学习文档_阿里技术专家带你玩转JVM,从底层源码到项目实战，都在这份文档里...