android 針對webView開發

Web應用程序概述

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 .使用一個垂直的線性佈局
避免需要爲用戶滾動瀏覽網頁的同時左，右。上下滾動，方便用戶，使您的網頁更簡單。

android 針對webView開發

前端使用 Konva 實現可視化設計器（13）- 折線 - 最優路徑應用【思路篇】

andriod map開發5 繪製當前位置

andriod 自動切換網絡和gps定位

android Button事件處理

android dialog禁用back

android頂部和底部導航欄

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結