標籤：cep sdn image mil com 調用 app ott java
上一篇我們學習了(1.[WebView學習之中的一個]:Web Apps簡單介紹),今天我們來繼續學習。
(部落格地址:http://blog.csdn.net/developer_jiangqq),轉載請註明。
Author:hmjiangqq
Email:[email protected]
由於Android裝置有非常多解析度，不一樣的螢幕以及像素密度。所以在Web頁面的設計過程中，應該考慮網頁總能顯示合適的大小。
在你為Android裝置開發Web頁面是，我們須要考慮下面兩個因素:
1.:視圖視窗(The ViewPort)
The Viewport是一個能夠進行縮放的矩形形狀的Web頁面。你能夠設定多個ViewPort屬性比如:尺寸大小以及初始化縮放比例。最重要的是the view port width(視圖的寬度)，這個定義了整個Web頁面的水平像素大小。
2:螢幕密度(The Screen Density)
在Android裝置上面WebView控制項和絕大多數Web瀏覽器一樣都能夠把CSS的像素值轉換成以密度為基礎的獨立像素值。所以你的Web頁面在中等密度螢幕(比如:160dpi)上面會呈現同樣的大小。假設你的Web設計中圖片是最重要的，那麼你更加要關注不同解析度密度的換算。由於300px寬度的會在320dpi螢幕上面會進行放大。
(一):指定表單內容(Specifying Viewport Properties )
視窗是一個Web頁面的地區，即時當我們進行縮放的時候可視視窗還是可以匹配螢幕的大小。比如:即時當我們的裝置的物理寬度是480px(像素),viewport的寬度是800px(像素),當Viewport為正常縮放比例是(1.0)該基於800px裝置的web頁面也會全然充分的顯示在螢幕上面。Android中絕大多數Web瀏覽器(比如:Chrome)的會預設設定一個大尺寸視圖(該被稱為"寬視圖模式"-一般為980px)。非常多瀏覽器也儘可能的縮小，來預設顯示完整的大小(該被稱為:概要模式)
[注]:當使用WebView來顯示頁面時，該預設不啟用寬視圖模式(這樣頁面會充分的放大。不會適配螢幕)，當然你能夠調用setUseWideViewPort()來啟用寬視圖模式
你能夠在html文檔的<head>中使用<metaname="viewport"…>標籤為你的Web頁面定義視圖的屬性，比如:寬度和初始化縮放比例。
以下是Viewport全部支援的屬性以及能夠設定的值
<span style="font-size:18px;"><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"] " /></span>
比如:在以下<meta>標籤中定義viewport寬度全然適配螢幕的寬度，而且設定使用者不能進行縮放
<span style="font-size:18px;"><head> <title>Example</title> <meta name="viewport" content="width=device-width, user-scalable=no" /></head></span>
當為行動裝置最佳化網頁。通過我們應該設定width為"device-width"，這樣儘可能的來適配全部的螢幕。然後使用CSS樣式檔案來為不同的螢幕解析度調整布局。
[注]:當你確定你的Web頁面來顯示在小解析度螢幕上面，你應該調用setUseWideViewPort(false)來禁用寬視圖模式。
(二)針對不同螢幕使用CSS樣式(Targeting Device Density with CSS)
Android瀏覽器以及WebView都支援CSS樣式檔案,這樣你能夠為特殊螢幕密度建立帶有"-webkit-device-pixel-ratio"的CSS樣式檔案。這個屬性的可取值為"0.75","1"或者"1.5",該分別代表低密度，中密度。以及高密度螢幕。
比如:你能夠為每個密度建立單獨的樣式檔案:
<span style="font-size:18px;"><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" /></span>
或者能夠在一個樣式檔案裡制定不同的風格
<span style="font-size:18px;">#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); }}</span>
很多其它處理不同螢幕解析度。特殊資源圖片的資訊。你能夠查看:High DPI Images forVariable Pixel Densities.
(三):針對不同的螢幕解析度來使用JavaScript
Android瀏覽器和WebView都支援Dom屬性，這樣我們能夠使用window.devicePixelRation該DOM屬性來查詢當前裝置的密度。該屬性的值代表當前設定的縮放比例因素。比如:假設window.devicePixelRatio的值為1.0，那麼此時裝置被覺得是中等密度螢幕而且預設不會進行縮放。假設該值為1.5，那麼此時裝置被覺得是高密度螢幕而且會進行1.5倍放大。
假設該值為0.75,那麼此時裝置被覺得是低密度螢幕而且會進行0.75縮小。當然Android瀏覽器和WebView的縮放比例都會基於現實Web頁面的裝置的密度，預設一般都會中等密度，可是你能夠為不同螢幕密度來進行改變。
比如:以下就是使用Javascript來查詢裝置密度
<span style="font-size:18px;">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");}</span>
[WebView學習之二]:使用Web Apps 支援不同解析度屏
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
