target-densitydpi

時間 2019-11-10

標籤 target densitydpi 简体版

原文原文鏈接

一個屏幕像素密度是由屏幕分辨率決定的，一般定義爲每英寸點的數量（dpi）。Android支持三種屏幕像素密度：低像素密度，中像素密度，高像素密度。一個低像素密度的屏幕每英寸上的像素點更少，而一個高像素密度的屏幕每英寸上的像素點更多。Android Browser和WebView默認屏幕爲中像素密度。javascript

下面是 target-densitydpi 屬性的取值範圍java

device-dpi –使用設備本來的 dpi 做爲目標 dp。不會發生默認縮放。
high-dpi – 使用hdpi 做爲目標 dpi。中等像素密度和低像素密度設備相應縮小。
medium-dpi – 使用mdpi做爲目標 dpi。高像素密度設備相應放大，像素密度設備相應縮小。這是默認的target density.
low-dpi -使用mdpi做爲目標 dpi。中等像素密度和高像素密度設備相應放大。
<value> – 指定一個具體的dpi 值做爲target dpi. 這個值的範圍必須在70–400之間。

通常來講，咱們實現佈局自適應能夠有如下幾種方式：android

使用流動佈局（fluid grid）
根據屏幕大小選擇加載不一樣的CSS
使用 CSS 的@media規則

這裏介紹的是如何讓定寬網頁在 WebApp 下（或者手機瀏覽器）實現自適應。例如，咱們設計了一套寬度爲 640px 的小頁面，主要是用於手機查看，可是手機屏幕分辨率實在太多了，要適應每臺手機，應該怎麼辦呢？ios

首先，咱們在 head 中加入：瀏覽器

<head> <meta name="viewport" content="width=device-width, user-scalable=no"> </head>

這裏表示 viewport 的寬度爲匹配設備屏幕的寬度，且禁用縮放。涉及到兩個概念：iphone

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 ：屏幕分辨率寬度

因而，最終解決方案以下：ui

<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: 其餘手機須要特殊處理的在下面 });

存在的問題：spa

目前只測試 android 和 ios/ipad 手機
android 下使用 firefox 沒法檢測出 android 的版本，所以只能忽略 firefox

ps: 理論上能夠利用枚舉的方式將通用的手機分辨率記錄起來，從而達到適應全部機型的效果。

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。