Android web開發快速入門
通俗的講，就是爲移動設備開發網頁。伴隨着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像素的寬度。注意這個縮小是一個全局縮小，也就是頁面上的所有元素都會縮小。如下圖所示，一個普通的文章頁面在移動設備的效果：
頁面以980像素加載，沒爲變形，但是按比例縮放後，已經沒有多少東西是可以用肉眼看清的了，好在一般的移動設備都支持屏幕放大。放大之後，我們才能看清屏幕上的內容。
怎麼樣，對viewport的概念有一定的瞭解了吧？那麼我們能不能人爲改變webkit的視區呢？當然能，在<head>與</head>之間加上如下視區代碼：
<meta name="viewport" content="width=500" />
.png)
<meta name="viewport" content="width=device-width" />
.png)
device-width將自動檢測移動設備的屏幕寬度。
怎麼樣？滿意了吧？所有頁內容都和移動設備屏幕自適應。
下面我們以一個列表頁面爲例，講解一下如何讓我們開發的頁面能夠在移動設備上完美的呈現。原始頁面臺下圖所示：
.png)
代碼如下所示：
<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;
}
.png)
.png)
.png)
#header div.leftButton {
font-weight: bold;
text-align: center;
line-height: 28px;
color: white;
text-shadow: 0px -1px 1px rgba(0,0,0,0.6);
position: absolute;
top: 7px;
left: 6px;
max-width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-width: 0 8px 0 14px;
-webkit-border-image: url(images/back_button.png) 0 8 0 14;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#header div.leftButton.clicked {
-webkit-border-image: url(images/back_button_clicked.png) 0 8 0 14;
}
var hist = [];
$(document).ready(function(){
$('#nav a').click(function(e){
e.preventDefault();
loadPage(e.target.href);
});
loadPage("null");
});
function loadPage(url) {
$('#container').load(url, function(result){
if(url=='null'){
$('#nav').show();
}else{
$('#nav').hide();
}
var title = $('h2').html() || '<a>移動web列表演示</a>';
$('h1').html(title);
$('h2').remove();
$('.leftButton').remove();
hist.unshift({'url':url, 'title':title});
if (hist.length > 1) {
$('#header').append('<div class="leftButton">返回</div>');
$('#header .leftButton').click(function(e){
$(e.target).addClass('clicked');
var thisPage = hist.shift();
var previousPage = hist.shift();
loadPage(previousPage.url);
});
};
});
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="user-scalable=no,width=device-width" />
<link rel="stylesheet" type="text/css" href="assets/css/android.css"
media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="assets/css/tab.css"
media="screen and (min-width: 481px)" />
<link rel="apple-touch-icon-precomposed" href="homeIcon.png" />
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/android.js"></script>
<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>
<link rel="apple-touch-icon-precomposed" href="homeIcon.png" />