首頁 > 開發者 > Android

Android web開發快速入門

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文轉自：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像素的寬度。注意這個縮小是一個全域縮小，也就是頁面上的所有元素都會縮小。如所示，一個普通的文章頁面在行動裝置的效果：

 

        頁面以980像素載入，沒為變形，但是按比例縮放後，已經沒有多少東西是可以用肉眼看清的了，好在一般的行動裝置都支援螢幕放大。放大之後，我們才能看清螢幕上的內容。        怎麼樣，對viewport的概念有一定的瞭解了吧？那麼我們能不能人為改變webkit的視區呢？當然能，在<head>與</head>之間加上如下視區代碼：
  1. <meta name="viewport" content="width=500" />

我們來看看頁面加上強制視區大小命令後效果怎麼樣？ 如所示：怎麼樣？是不是好了很多？那麼有沒有更好的方法呢？比如說我們自動檢測行動裝置螢幕大小，然後讓內容自適應。很簡單，看來面的代碼：

  1. <meta name="viewport" content="width=device-width" />

device-width將自動檢測行動裝置的螢幕寬度。怎麼樣？滿意了吧？所有頁內容都和行動裝置螢幕自適應。下面我們以一個列表頁面為例，講解一下如何讓我們開發的頁面能夠在行動裝置上完美的呈現。原始頁面台所示： 代碼如下所示：

<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;
}

和普通頁面一樣，我們只是增加了適用於行動裝置的背景漸層、陰影製作效果，還給列表的第一項上方和列表最後一項上方增加了圓角效果，最終效果如所示：怎麼樣？在手機上是不是很漂亮？對於平板電腦使用的css,我們這裡僅改變了一下背景顏色，在平板電腦上使用tab.css最終效果如下所示：最後我們來完善一下我們的列表頁面，使用jquery的ajax載入列表詳細內容。最後實現的效果就是單擊列表任意一項，如下所示：在我們的css檔案中，增加返回按鈕樣式，代碼如下所示：
  1. #header div.leftButton {
  3.     font-weight: bold;
  5.     text-align: center;
  7.     line-height: 28px;
  9.     color: white;
  11.     text-shadow: 0px -1px 1px rgba(0,0,0,0.6);
  13.     position: absolute;
  15.     top: 7px;
  17.     left: 6px;
  19.     max-width: 50px;
  21.     white-space: nowrap;
  23.     overflow: hidden;
  25.     text-overflow: ellipsis;
  27.     border-width: 0 8px 0 14px;
  29.     -webkit-border-image: url(images/back_button.png) 0 8 0 14;
  31.     -webkit-tap-highlight-color: rgba(0,0,0,0);
  33. }
  37. #header div.leftButton.clicked {
  39.     -webkit-border-image: url(images/back_button_clicked.png) 0 8 0 14;
  41. }

複製代碼　　增加js檔案android.js，代碼如下所示：

  1. var hist = [];
  3. $(document).ready(function(){
  5.          $('#nav a').click(function(e){
  7.                    e.preventDefault();
  9.                    loadPage(e.target.href);
  11.                    });
  13.          loadPage("null");
  15. });
  19. function loadPage(url) {
  21.     $('#container').load(url, function(result){
  23.              if(url=='null'){
  25.                        $('#nav').show();
  27.              }else{
  29.                        $('#nav').hide();
  31.              }
  33.         var title = $('h2').html() || '<a>移動web列表示範</a>';
  35.         $('h1').html(title);
  37.         $('h2').remove();
  39.         $('.leftButton').remove();
  41.         hist.unshift({'url':url, 'title':title});
  43.         if (hist.length > 1) {
  45.             $('#header').append('<div class="leftButton">返回</div>');
  47.             $('#header .leftButton').click(function(e){
  49.                 $(e.target).addClass('clicked');
  51.                 var thisPage = hist.shift();
  53.                 var previousPage = hist.shift();
  55.                 loadPage(previousPage.url);
  57.             });
  59.         };
  61.     });
  63. }

複製代碼　　實現所有功能後列表頁面完整的代碼如下所示：

  1. <html>
  3. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <meta name="viewport" content="user-scalable=no,width=device-width" />
  9. <link rel="stylesheet" type="text/css" href="assets/css/android.css"
  11.          media="only screen and (max-width: 480px)" />
  13. <link rel="stylesheet" type="text/css" href="assets/css/tab.css"
  15.          media="screen and (min-width: 481px)" />
  17. <link rel="apple-touch-icon-precomposed" href="homeIcon.png" />
  19. <script type="text/javascript" src="assets/js/jquery.js"></script>
  21. <script type="text/javascript" src="assets/js/android.js"></script>
  23. <title>列表</title>
  25. </head>
  27. <body>
  29. <div id="header">
  31. <h1><a href="#">移動web列表示範</a></h1>
  33. </div>
  35. <div id="nav">
  37. <ul id="taskList">
  39.          <li><a href="pre.html">準備會議資料</a></li>
  41.          <li><a href="webmeeting.html">參加關於移動web開發的技術討論會</a></li>
  43.          <li><a href="meetingjack.html">會見客戶Jack</a></li>
  45.          <li><a href="designdoc.html">整理XX系統設計文檔</a></li>
  47. </ul>
  49. </div>
  51. <div id="container"></div>
  52. <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開發涉及到的東西還很多，本文僅是簡單的介紹一點入門知識，更多的內容還需要自己去實踐，去學習。希望本文對您有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More