一個屏幕像素密度是由屏幕分辨率決定的，通常定義為每英寸點的數量（dpi）。Android支持三種屏幕像素密度：低像素密度，中像素密度，高像素密度。一個低像素密度的屏幕每英寸上的像素點更少，而一個高像素密度的屏幕每英寸上的像素點更多。Android Browser和WebView默認屏幕為中像素密度。
下面是 target-densitydpi 屬性的 取值范圍
- device-dpi –使用設備原本的 dpi 作為目標 dp。 不會發生默認縮放。
- high-dpi – 使用hdpi 作為目標 dpi。 中等像素密度和低像素密度設備相應縮小。
- medium-dpi – 使用mdpi作為目標 dpi。 高像素密度設備相應放大， 像素密度設備相應縮小。 這是默認的target density.
- low-dpi -使用mdpi作為目標 dpi。中等像素密度和高像素密度設備相應放大。
- <value> – 指定一個具體的dpi 值作為target dpi. 這個值的范圍必須在70–400之間。
一般來說，我們實現布局自適應可以有以下幾種方式：
- 使用流動布局（fluid grid）
- 根據屏幕大小選擇加載不同的CSS
- 使用 CSS 的@media規則
這里介紹的是如何讓定寬網頁在 WebApp 下（或者手機瀏覽器）實現自適應。例如，我們設計了一套寬度為 640px 的小頁面，主要是用於手機查看，但是手機屏幕分辨率實在太多了，要適應每台手機，應該怎么辦呢？
首先，我們在 head 中加入：
<head> <meta name="viewport" content="width=device-width, user-scalable=no"> </head> 這里表示 viewport 的寬度為匹配設備屏幕的寬度，且禁用縮放。涉及到兩個概念：
- viewport 元素
- devicePixelRatio：設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。
由於 iphone 手機和 android 4.0 以上的手機支持修改 viewport 的 width 來改變頁面的縮放情況，因此我們可以將 width 指定為頁面設計的寬度，如此一來，你的頁面正好充滿 viewport 並全屏顯示，而不會縮放。例如：
<meta name="viewport" content="width=640px, user-scalable=no"> 但是對於 android 4.0 以下的手機，不支持設置 viewport 的 width，但是我們可以設置 Android 的另一參數target-densitydpi，從而達到相同的目的，計算 target-densitydpi 的公式如下：
target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160; //UI-width ：WebApp布局寬度 //device-width ：屏幕分辨率寬度 於是，最終解決方案如下：
<meta name="viewport" content="target-densitydpi=device-dpi, width=640px, user-scalable=no"> $(function () { var DEFAULT_WIDTH = 640, // 頁面的默認寬度 ua = navigator.userAgent.toLowerCase(), // 根據 user agent 的信息獲取瀏覽器信息 deviceWidth = window.screen.width, // 設備的寬度 devicePixelRatio = window.devicePixelRatio || 1, // 物理像素和設備獨立像素的比例，默認為1 targetDensitydpi; // Android4.0以下手機不支持viewport的width，需要設置target-densitydpi if (ua.indexOf("android") !== -1 && parseFloat(ua.slice(ua.indexOf("android")+8)) < 4) { targetDensitydpi = DEFAULT_WIDTH / deviceWidth * devicePixelRatio * 160; $('meta[name="viewport"]').attr('content', 'target-densitydpi=' + targetDensitydpi + ', width=device-width, user-scalable=no'); } // TODO: 其他手機需要特殊處理的在下面 }); 存在的問題：
- 目前只測試 android 和 ios/ipad 手機
- android 下使用 firefox 無法檢測出 android 的版本，因此只能忽略 firefox
ps: 理論上可以利用枚舉的方式將通用的手機分辨率記錄起來，從而達到適應所有機型的效果。