一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（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 中加入：

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

这里表示 viewport 的宽度为匹配设备屏幕的宽度，且禁用缩放。涉及到两个概念：

  • viewport 元素
  • devicePixelRatio：设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

由于 iphone 手机和 android 4.0 以上的手机支持修改 viewport 的 width 来改变页面的缩放情况，因此我们可以将 width 指定为页面设计的宽度，如此一来，你的页面正好充满 viewport 并全屏显示，而不会缩放。例如：

  1. <meta name="viewport" content="width=640px, user-scalable=no">

但是对于 android 4.0 以下的手机，不支持设置 viewport 的 width，但是我们可以设置 Android 的另一参数target-densitydpi，从而达到相同的目的，计算 target-densitydpi 的公式如下：

  1. target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160;
  2.   //UI-width ：WebApp布局宽度
  3.   //device-width ：屏幕分辨率宽度

于是，最终解决方案如下：

  1. <meta name="viewport" content="target-densitydpi=device-dpi, width=640px, user-scalable=no">
  1. $(function () {
  2.     var DEFAULT_WIDTH = 640, // 页面的默认宽度
  3.         ua = navigator.userAgent.toLowerCase(), // 根据 user agent 的信息获取浏览器信息
  4.         deviceWidth = window.screen.width, // 设备的宽度
  5.         devicePixelRatio = window.devicePixelRatio || 1, // 物理像素和设备独立像素的比例，默认为1
  6.         targetDensitydpi;
  8.     // Android4.0以下手机不支持viewport的width，需要设置target-densitydpi
  9.     if (ua.indexOf("android") !== -1 && parseFloat(ua.slice(ua.indexOf("android")+8)) < 4) {
  10.         targetDensitydpi = DEFAULT_WIDTH / deviceWidth * devicePixelRatio * 160;
  11.         $('meta[name="viewport"]').attr('content', 'target-densitydpi=' + targetDensitydpi +
  12.                 ', width=device-width, user-scalable=no');
  13.     }
  15.     // TODO: 其他手机需要特殊处理的在下面
  16. });

存在的问题：

  • 目前只测试 android 和 ios/ipad 手机
  • android 下使用 firefox 无法检测出 android 的版本，因此只能忽略 firefox

ps: 理论上可以利用枚举的方式将通用的手机分辨率记录起来，从而达到适应所有机型的效果。

target-densitydpi的更多相关文章

  1. MySQL中You can't specify target table for update in FROM clause一场

    mysql中You can't specify target table <tbl> for update in FROM clause错误的意思是说,不能先select出同一表中的某些值 ...

  2. jQuery之常用且重要方法梳理（target,arguments,slice,substring,data,trigger,Attr）-（一）

    1.jquery  data(name) data() 方法向被选元素附加数据,或者从被选元素获取数据. $("#btn1").click(function(){ $(" ...

  3. ASP.NET 5 Target framework dnx451 and dnxcore50

    中文不知如何定义标题,所以干脆就直接贴出关键字,在 ASP.NET 5 项目的 project.json 配置文件中,会有这样的定义: "frameworks": { " ...

  4. minSdkVersion maxSdkVersion targetSdkVersion target 的区别

    minSdkVersion 描述:app最低支持的sdk版本号 作用:如果手机SdkVersion小于app中定义的minSdkVersion,则android系统不允许安装该app 定义位置:And ...

  5. MDK st-link下载STM32程序出现Internal command error和Error:Flash download failed. Target DLL

    MDK st-link下载STM32程序出现Internal command error和Error:Flash download failed. Target DLL   是因为目标板的芯片处于休眠 ...

  6. jBPM4.4 no jBPM DB schema: no JBPM4_EXECUTION table. Run the create.jbpm.schema target first in the install tool.

    jBPM4.4 no jBPM DB schema: no JBPM4_EXECUTION table. Run the create.jbpm.schema target first in the ...

  7. mysql-You can’t specify target table for update in FROM clause错误

    mysql中You can't specify target table for update in FROM clause错误的意思是说,不能先select出同一表中的某些值,再update这个表( ...

  8. podfile The dependency `` is not used in any concrete target

    内容提要: podfile升级之后到最新版本,pod里的内容必须明确指出所用第三方库的target,否则会出现The dependency `` is not used in any concrete ...

  9. HTML <a> 标签的 target 属性

    HTML <a> 标签的 target 属性 HTML <a> 标签 定义和用法 <a> 标签的 target 属性规定在何处打开链接文档. 如果在一个 <a ...

  10. window.event.srcElement与window.event.target 触发事件的元素

    IE浏览器支持window.event.srcElement , 而firefox支持window.event.target:<input type="text" onblu ...

随机推荐

  1. NSString 初始化方法的内存比较

    NSString *str1 = @"hello"; NSString *str2 = @"hello"; NSString *str3 = [NSString ...

  2. 无废话ExtJs 入门教程十七[列表：GridPanel]

    无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...

  3. k-means聚类算法python实现

    K-means聚类算法 算法优缺点: 优点:容易实现缺点:可能收敛到局部最小值,在大规模数据集上收敛较慢使用数据类型:数值型数据 算法思想 k-means算法实际上就是通过计算不同样本间的距离来判断他 ...

  4. 利用WCF创建简单的RESTFul Service

    1):用VS2013创建一个WCF的工程,如下图所示: 2):我们来看一下默认状态下的config文件内容,这里的内容我们会再后续的步骤中进行修改 <?xml version="1.0 ...

  5. iOS存储的三种方式

    iOS中存储的3中方式: 1.NSUserDefaults 注意存储基本对象类型是没有问题的,但是要存储自定义对象,则要将对象内所有的属性(或是需要存储的属性)序列化,实现NSCoding协议序列化. ...

  6. 同步、更新、下载Android Source & SDK from 国内镜像站（转载）

    同步.更新.下载Android Source & SDK from 国内镜像站 转自: 同步.更新.下载Android Source & SDK from 国内镜像站 Download ...

  7. ArrayList数组列表

    ArrayList数组列表 Collection接口和List接口的区别 List接口扩充了Collection接口,添加了索引相关的方法. code example Object get(int i ...

  8. C++: virtual inheritance and Cross Delegation

    Link1: Give an example Note: I think the Storable::Write method should also be pure virtual. http:// ...

  9. Leetcode Minimum Window Substring

    Given a string S and a string T, find the minimum window in S which will contain all the characters ...

  10. Leetcode First Missing Positive

    Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2,0]  ...