一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（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. 实现tableview的下拉刷新

    实现tableview的下拉刷新 推荐第三方下拉刷新代码http://code4app.com/ios/%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90%E4%B8%8B%E6 ...

  2. Android平台下OpenCV移植与使用---基于C/C++

    在<Android Studio增加NDK代码编译支持--Mac环境>和<Mac平台下Opencv开发环境搭建>两篇文章中,介绍了如何使用NDK环境和Opencv环境搭建与测试 ...

  3. nmon的安装

    安装 mkdir /usr/local/nmon cd /usr/local/nmon wget http://sourceforge.net/projects/nmon/files/nmon_lin ...

  4. 理解WebService SOAP WSDL

    WebServices简介 先给出一个概念 SOA ,即Service Oriented Architecture ,中文一般理解为面向服务的架构, 既然说是一种架构的话,所以一般认为 SOA 是包含 ...

  5. Model Validation in ASP.NET Web API

    Model Validation in ASP.NET Web API 原文:http://www.asp.net/web-api/overview/formats-and-model-binding ...

  6. C# 读取 CSV 文件

    最近做一个C#项目要导入CSV文件中的数据到Oracle中,使用Aspose.Cells读取中文字段标题却乱码,表的最后多出几行null记录,而且不是免费的,后来找到了NPOI,顾名思义,就是POI的 ...

  7. Leetcode Simplify Path

    Given an absolute path for a file (Unix-style), simplify it. For example,path = "/home/", ...

  8. Leetcode Distinct Subsequences

    Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequence ...

  9. Leetcode First Missing Positive

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

  10. C# WinForm 慎用 override CreateParams 来重载窗体的一些特性

    窗体和控件的属性CreateParams(这真的是一个属性)很神奇,因为通过它你能够很方便的控制窗体或控件诸如边框.最大化最小化关闭按钮的隐藏.窗体的模式化弹窗模式等的一些特性.虽然,CreatePa ...