主页 > web > html >

target-densitydpi

2018-12-15 16:34 来源:未知 作者:mas 责编:mas 评论:
一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(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: 理论上可以利用枚举的方式将通用的手机分辨率记录起来,从而达到适应所有机型的效果。

【版权声明】本站部分内容来源于互联网,本站不拥有所有权,如果发现本站有侵权的内容,欢迎发送邮件至 benumon@163.com 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。

分享:

更多文章

相关文章

关键词:

思韵闪耀,一生受益,思韵科技旗下专业IT技术社区 - 爱编程,爱源码,爱技术,一生受益。

Copyright © 2002-2018 Power by DedeCms

豫ICP备13002912号-2