一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（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: 理论上可以利用枚举的方式将通用的手机分辨率记录起来，从而达到适应所有机型的效果。

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. (转)Tomcat7+Redis存储Session

    原创http://blog.csdn.net/caiwenfeng_for_23/article/details/45666831 PS:截止到2015-05-12前是不支持Tomcat8的,详情见官 ...

  2. mysql知识

    1.Limit 在语句的最后,起到限制条目的作用 Limit [offset,] [N] offset:偏移量 N:取出条目 例子:select * from stu limit 3,3; 2.左连接 ...

  3. vagrant学习笔记

    什么是vagrant简而言之,vagrant就是一个用来管理虚拟机文件的工具为什么要使用vagra如果经常玩虚拟机的话,就会知道,当你需要新建一个虚拟环境的时候,总是要重复的安装操作系统,以及操作系统 ...

  4. MySQL 相关

    Innodb引擎 Innodb引擎提供了对数据库ACID事务的支持,并且实现了SQL标准的四种隔离级别.该引擎还提供了行级锁和外键约束,它的设计目标是处理大容量数据库系统. 但是该引擎不支持FULLT ...

  5. 在ionic这个框架下(Angular JS)，对URL进行重写，过滤掉URL中的#号

    此时URL的改变已经完全不受后台代码控制了,因此我们要在前端的ionic这个框架和IIS中进行修改调控. 其实IIS只是host了整个站点,具体的URL跳转都是由前端来控制的. 1):那么前端要加上一 ...

  6. Hadoop Linux安装

    Hadoop Linux安装 步骤流程 1.硬件准备 2.软件准备(推荐CDH) 3.将Hadoop安装包分发到各个节点下 4.安装JDK 5.修改/etc/hosts配置文件 6.设置SSH免密码登 ...

  7. Session和Cache的区别

    以前实现数据的缓存有很多种方法,有客户端的Cookie,有服务器端的Session和Application.其中Cookie是保存在客户端的一组数据,主要用来保存用户名等个人信息.Session则保存 ...

  8. [BZOJ4029][HEOI2015] 定价

    Description 在市场上有很多商品的定价类似于 999 元.4999 元.8999 元这样.它们和 1000 元.5000 元和 9000 元并没有什么本质区别,但是在心理学上会让人感觉便宜很 ...

  9. 第三方登录分享功能－ShareSDK for iOS适配问题记录

    最近app里需要添加第三方授权登陆和分享的功能,选择了ShareSDK,参考了ShareSDK文档对该SDK进行了适配,但遇到了一些问题 1.问题:分享功能点击不跳转  原因:适配iOS9添加白名单 ...

  10. FatMouse's Speed——J

    J. FatMouse's Speed FatMouse believes that the fatter a mouse is, the faster it runs. To disprove th ...