1.實現方式
基本上有兩種方式實現在android上開發web程式，一種通過使用Android SDK開發apk，用webView實現；另一種使用web標準開發，通過網路瀏覽器訪問.
2. 特點
a.支援viewport屬性，讓應用以正確的大小適應不同尺寸的螢幕
b.CSS和JavaScript支援，提供不同的風格和基於螢幕的像素密度（螢幕解析度）的映像
所以，為Android開發一個Web應用程式可以排除螢幕支援的考慮,應為已經很容易讓你的網頁適應所有搭載android系統的螢幕 。
Android的另一大特點是，可以混合WebView和APK兩個一起開發一個Android用戶端的應用程式。 可以定義你的Android應用程式和網頁之間的介面，允許網頁中的JavaScript調用Android應用程式提供基於Web的應用程式的Android API。
針對Web應用程式的螢幕
1.針對Android裝置開發網頁時，有兩個基本因素
a.viewport大小和縮放的網頁
Android瀏覽器載入網頁時，預設行為是在“預覽模式”，它提供了一個網頁縮放的角度載入頁面。
可以為網頁定義viewport的預設尺寸或viewport的初始縮放， 還可以控制多少使用者可以放大和縮小網頁。使用者還可以在瀏覽器中設定禁用預覽模式，所以不應該設定頁面載入模式，應該自訂viewport大小或縮放。
b. 該裝置的螢幕密度
Android裝置螢幕密度（每英吋像素數）影響網頁顯示的解析度和大小。（三屏密度類別：低，中，高）。Android瀏覽器和WebView中, 減少縮放網頁在螢幕密度的變化。如果圖片是網頁設計的重要元素，你應該密切關注在不同的密度中映像的縮放，因為可以產生模糊的效果。要為所有密度的螢幕，提供最佳的視覺效果，應該控制縮放，根據目標螢幕的密度提供資源，可以適用於不同螢幕使用的CSS或JavaScript的替代圖片。
使用viewport
viewport是網頁可繪製的地區。雖然viewport可視面積和螢幕尺寸相匹配，但viewport有其自己的尺寸，確定網頁的像素數量。也就是說，網頁的像素數量超過定義的viewport尺寸，而不是裝置螢幕尺寸的螢幕面積。例如，雖然裝置螢幕上可能有一個480像素寬，viewport可以有一個800像素寬，這樣網頁設計是寬800像素完全顯示在螢幕上。
可以在HTML 網頁中使用viewport屬性（必須設定置在文檔<HEAD>的<META>中）。可以在<meta>中定多個viewport屬性，例如，你可以定義viewport的高度和寬度，頁面初始縮放，和目標螢幕密度，每個viewport屬性中的屬性內容必須用逗號隔開。
例如下面的代碼片斷，從一個HTML文檔指定viewport屬性的寬度應完全符合裝置螢幕的寬度，並禁用縮放。
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
content="width=device-width"
viewport的寬度等於裝置寬度，viewport會根據螢幕寬度自動適應，並且對圖片和文字進行縮放顯示.
這是一個只有兩個viewport屬性的例子。下列文法顯示所有支援的viewport屬性和每一個接受的值一般類型
<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi |
high-dpi | medium-dpi | low-dpi]
" />
定義viewport大小
定義viewport的高度和寬度屬性指定viewport大小。
在上面的介紹中提到，Android瀏覽器預設以“預覽模式”載入頁面（除非使用者禁用）.如果viewport的寬度為800像素, 您的網頁指定其大小是寬320像素，那麼你的網頁小於可見螢幕. 為了避免縮放效果，你應該明確定義viewport寬度,使其與設計的網頁的寬度相匹配。
例如，如果您的網頁設計是整整320像素寬，那麼你可能要指定視口寬度大小：
<meta name="viewport" content="width=320" />
如果指定viewport的寬度,那麼圖片將不會被縮放,如果viewport 大於螢幕的實際像素,那麼圖片將不能完全顯示,需要拖動才能看到完整效果.
在這種情況下，您的網頁完全適合螢幕的寬度，因為網頁的寬度和視口的寬度是相同的。
註：寬度值大於10,000和大於（或等於）320被忽略, 結果在裝置寬度等於一個值。然後高度值大於10,000或小於200的也被忽略。
註：預設情況下, 如果你設定了viewport的寬度匹配您的網站頁面寬度和裝置的螢幕寬度並沒有符合的尺寸，然而網頁仍然適合高或低密度的螢幕. 因為Android瀏覽器會以一個中等密度螢幕的大小相匹配的WebView載入網頁.螢幕密度討論了更多的定義viewport的目標密度。
自動調整大小
指定viewport尺寸精確像素的替代品，你可以設定viewport的大小總是匹配裝置的螢幕尺寸，定義viewport屬性的高度 和寬度與裝置高度和裝置寬度值匹配。當你正在開發一個web應用，具有未知的寬度（不固定寬度），但你希望它完美契合每一個螢幕，如網頁的寬度相互匹配螢幕。例如：
<meta name="viewport" content="width=device-width" />
width=device-width, 和viewport的寬度匹配，無論當前螢幕寬度是不是指定的大小。重要的是要注意到，在縮放以適合螢幕大小的映像時，當前的裝置不匹配目標密度，預設中密度。因此，對高密度裝置在顯示的映像進行縮放，為了配合中密度螢幕螢幕的寬度。
網頁寬度與viewport裝置的寬度或初始縮放為1.0。
註：如果不是用縮放網頁來匹配裝置尺寸,必須指定目標裝置densitydpi。這是討論有關定義viewport密度的.否則，簡單地使用裝置的高度和寬度定義viewport的大小，使您的網頁適合每個裝置的螢幕，但您的映像縮放，為了適應不同的螢幕密度。
定義viewport比例
viewport的縮放定義適用於網頁的縮放層級。Viewport的屬性允許您指定您的網頁縮放在以下範圍：
initial-scale 初始縮放
本頁面的初始縮放。該值是一個浮點型數值,表示網頁的大小，相對與螢幕尺寸。
例如，如果你設定的初始縮放為“1.0”，然後網頁顯示符合該決議的目標密度 1到1。如果設定為“2.0”，然後在頁面（放大）放大了2倍。
預設的初始縮放計算，以適應viewport大小的網頁。因為預設viewport的寬度是800像素，如果該裝置的螢幕解析度是小於800像素寬，最初的規模是小於1.0，預設情況下，以適應螢幕上的800個像素寬的頁面。
minimum-scale 最小縮放
允許的最低縮放。該值是一個浮點型，表示值最低，為你的網頁大小的螢幕尺寸相對。例如，如果你設定這個“1.0”，然後在頁面不能縮小，因為最小尺寸與目標密度是1到1 。
maximum-scale 最大縮放
規模最大允許頁面。值是一個浮點數，表示最大值的網頁大小，螢幕尺寸相對。例如，如果你設定這個“2.0”，然後在頁面不能放大2倍以上大小的目標。
user-scalable 使用者可擴充性
使用者是否可以更改網頁的縮放（放大和縮小）。設定為 yes 允許縮放和no禁止縮放。預設情況下是允許的。如果你設定為no，然後最小縮放和最大縮放的值將被忽略，因為無法縮放。
所有縮放的值必須是0.01-10範圍內。
例如：
<meta name="viewport" content="initial-scale=1.0" />
此資料設定的初始縮放為全尺寸，相對viewport的目標密度。
定義viewport的目標密度
裝置的螢幕上的密度是根據螢幕的解析度，點每英寸（dpi）的數量界定。這是由Android支援三種屏密度：低（LDPI），中等（MDPI）的，和高（MDPI）的。密度低的螢幕可減少每英吋像素數，而高密度的螢幕每英寸的像素越多（中等密度的螢幕相比）。Android瀏覽器的WebView預設的是中密度螢幕。
因為預設的目標密度是中等的，當使用者有低或高密度屏，Android瀏覽器和裝置的WebView縮放網頁（有效放大的頁面），讓他們合適的顯示，以中等密度大小相匹配螢幕。更具體地說，Android瀏覽器WebView以約1.5倍的值縮放高密度屏（因為其螢幕像素更小）和低密度螢幕上的網頁（約0.75倍的縮放，因為它的螢幕像素是更大）。
由於此預設縮放，數字1，2和3顯示在相同的物理尺寸，例如網頁上的高，中密度裝置（高密度的裝置顯示網頁預設的比例係數是1.5倍大於實際像素解析度，相匹配的目標密度）。可以使您的圖片出現一些不好的效果。例如，雖然顯示在中等和高密度的裝置的大小相同，高密度的裝置上的映像出現模糊，因為被設計為320像素寬，但是在480像素顯示。
您可以更改為您的網站頁面使用的目標螢幕密度的目標densitydpi viewport屬性。它接受以下值：
device-dpi
裝置的DPI -使用為目標的DPI裝置的本地DPI。預設縮放從未發生。
high-dpi 高dpi -使用為目標DPI hdpi。中等和低密度螢幕適當縮減。
medium-dpi 中DPI -使用為目標DPI MDPI。高密度屏擴充和低密度螢幕縮小。這是預設的目標密度。
low-dpi 低DPI - LDPI使用為目標DPI。適當擴大中等和高密度的螢幕。
<VALUE> -指定使用為目標的DPI DPI值。值必須在70-400範圍內。
例如，讓網頁根據不同的螢幕密度縮放，以防止Android瀏覽器和WebView中預設設定，設定的目標densitydpi Viewport屬性裝置dpi的。當你這樣做，將不進行縮放頁面。相反，頁面顯示在當前螢幕的密度的大小相匹配。在這種情況下，你也應該定義Viewport寬度相匹配的裝置寬度，使您的網頁自然適合螢幕大小。例如：
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
針對裝置密度與CSS
Android瀏覽器和WebView中支援的CSS媒體功能，使您可以建立特定的螢幕密度的樣式CSS -WebKit的裝置像素比媒體功能。此功能適用於你的價值應該是無論是“0.75”，“1”或“1.5”，表明樣式為低密度，中密度或高密度屏，分別是裝置。
例如，你可以為每個密度建立單獨的樣式表：
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
或指定一個樣式表中的不同風格：
#header {
background:url(medium-density-image.png);
}
@media screen and (-webkit-device-pixel-ratio: 1.5) {
/* CSS for high-density screens */
#header {
background:url(high-density-image.png);
}
}
@media screen and (-webkit-device-pixel-ratio: 0.75) {
/* CSS for low-density screens */
#header {
background:url(low-density-image.png);
}
}
註：＃頭為預設樣式,適用於大於2.0，以支援裝置啟動並執行Android版本, 少的中等密度裝置設計的樣式，不支援WebKit的裝置像素比媒體功能。
取決於你如何定義你的viewport屬性的類型風格，你可能需要根據螢幕的密度調整。提供完全定製的樣式，為每個受支援的密度修改您的網頁，你應該設定你的viewpor屬性，使viewpor的寬度和密度匹配裝置。
這就是：
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
這樣一來，Android瀏覽器和WebView中不執行您的網頁縮放和viewport的寬度相匹配的螢幕寬度完全相同。然而，通過添加一些自訂的CSS使用的WebKit的裝置像素比媒體功能，可以應用不同的樣式。
針對裝置密度與JavaScript
Android瀏覽器和WebView中支援一個DOM屬性，使您可以查詢當前裝置的密度window.devicePixelRatio DOM屬性。這個屬性的值指定當前裝置使用的比例因素。例如，如果值window.devicePixelRatio是“1.0”，則該裝置被認為是中等密度的裝置，預設情況下應用，如果值是“1.5”，則該裝置被認為是一種高密度裝置和頁面縮放預設情況下的1.5倍;如果值是“0.75”，則該裝置被認為是一個低密度裝置和頁面縮放預設的0.75倍。當然了，Android瀏覽器和縮放的WebView APPLY是網頁的目標密度為-的有關節中描述的基礎定義的視口目標密度，預設的目標是中等密度的，但你可以改變的目標來影響如何您的網頁縮放為不同的螢幕密度。
例如，這裡是你如何用JavaScript可以查詢裝置密度：
if (window.devicePixelRatio == 1.5) {
alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
alert("This is a low-density screen");
}
Web應用程式的最佳實務
開發網頁和行動裝置的Web應用程式提出了不同的挑戰，發展為典型的案頭瀏覽器的網頁。為了協助你開始，下面是一個做法，你應該遵循以Android和其他行動裝置提供最有效Web應用程式的列表。
1. 行動裝置重新導向到一個專門的網站的移動版本
有幾種方法可以請求重新導向到您的網站的移動版本，使用伺服器端重新導向。大多數情況下，這是通過網頁瀏覽器提供的使用者代理程式字串“嗅”。以確定是否為您網站的移動版本，你應該簡單地看為“移動”使用者代理程式字串，匹配的多種行動裝置。如果有必要，還可以識別特定的作業系統中的使用者代理程式字串（如“的Android 2.1”）。
註：大螢幕Android的供電裝置，應送達全尺寸的網站（如片劑），不包括“移動”使用者代理程式字串，而使用者代理程式字串的其餘部分大多是相同的。正因為如此，這一點很重要，您提供基於“移動”的使用者代理程式字串是否存在您的網站的移動版本。
2. 這是適用於行動裝置的，使用一個有效標記的DOCTYPE
用於移動網站是最常見的標記語言XHTML基礎。這個標準，確保您的網站，最適合行動裝置上的特定標記。例如，它不允許HTML架構或巢狀表格，行動裝置上執行不佳。隨著的DOCTYPE，確保申報檔案（如UTF-8）適當的字元編碼。
例如：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
3. 使用viewport的中繼資料，適當地調整你的網頁
在您的檔案<HEAD>，你應該提供的中繼資料，指定您希望如何瀏覽器的視口，以使您的網頁。例如，你的視口的中繼資料可以指定高度和寬度為瀏覽器的視口，最初的網頁的規模和目標螢幕密度。
例如：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
如需更多有關如何使用Android的供電裝置的視口的中繼資料的詳細資料，請閱讀針對Web應用程式的螢幕。
4. 避免多個檔案請求
因為行動裝置通常有一個連線速度遠遠超過一台台式電腦慢，你應該讓你的網頁儘可能快的負載。加快步伐的方法之一是為了避免載入樣式和指令檔，如額外檔案<HEAD>的。相反，在<head>直接提供你的CSS和JavaScript（或在的<body>年底，指令碼，你不需要，直到頁面載入）。另外，你應該通過壓縮他們喜歡的工具最佳化您的檔案的大小和速度縮小。
5 .使用一個垂直的線性布局
避免需要為使用者滾動瀏覽網頁的同時左，右。上下滾動，方便使用者，使您的網頁更簡單。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
