关于meta viewport中target-densitydpi属性详解（推荐）

前段时间在做WAP页面，发现页面设置了meta viewport中的大众属性，即：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" > 

但发现页面依旧不根据手机屏幕进行自动缩放，后来找其他同事帮忙解决了，我看了源代码发现了是在原来的viewport中增加了target-densitydpi属性。看之初不太了解，也因为当时自己手上有其他需求在处理，最近突然想起了这件事，准备对它做一些了解，以备不时之需。

首先来了解一下这个属性到底是做什么的，从网上摘录了一段简介，如下：

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

注：以上信息取自http://www.jb51.net/html5/177188.html

上面的信息我也从android官网找到了相关资料，这个资料在上面URL页面中都进行了翻译！

从这段简介可以得到如下信息：

1、它是指的屏幕分辨率，现在绝大多数智能手机屏幕都是可以通过viewport中的width来页面宽度的调整，其实我的理解就是调整屏幕显示该页面的分辨率，只是这个值不是直观来设置，而是浏览器通过width值来进行计算得出。

2、这个属性只对android系统起作用，专有属性。iOS不支持它，所以说起来，还是有兼容性问题，如果页面是兼容ios和android的话。

3、这个属性取值还挺多的，不过，一般个人使用较多的可能会是第五种，即自定义，因为这个不需要记住前端四个值的单词。

有了这些信息，我也拿出了三星i9100进行了测试，效果如下：

先贴HTML结构：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,target-densitydpi=360" />
<link href="inc/base-min.css" rel="external nofollow" rel="stylesheet" type="text/css">
<style type="text/css">
body{border:4px solid #F00;}
</style>
</head> 

<body>
<p>如果你要为网页针对不同屏幕分辨率修改，用 -webkit-device-pixel-ratio这个media标签或在js中用 window.devicePixelRatio这个方法，设置target-densitydpi标签和device-dpi属性。这让你的定制更具有灵活性。</p>
<p>在iOS中有两个meta值， apple-mobile-web-app-capable 和apple-mobile-web-app-status-bar-style，这两个会让网页内容以应用程序风格显示，并使状态栏透明。</p>
<div class="demo">
<img src="images/mm1.jpg">
<br />
<img src="images/mm2.jpg">
<br />
<img src="images/mm3.jpg">
</div>
</body>
</html>

chrome android版（）
属性的所有取值都不支持！

效果：

UC（最新版V9.1）

所有属性都有支持，具体情况如下：

device-dpihigh-dpimedium-dpilow-dpi70360400

系统自带（android 4.1.2）

所有属性都有支持，具体情况如下：

device-dpihigh-dpimedium-dpilow-dpi70360400

查看测试时，虽然同时注意图片与文字大小的变化！

总结：

从各浏览器的测试效果来看，只有android WEB和UC支持这个属性，依目前国内手机浏览器的占比来看，UC使用率还是非常高的，所以，在android方面使用这个属性去解决问题的话，还是可以得到大面积支持的。另外关于这个属性中最后一个自定义取值，当值超过最大值400或小于最小值70的时候，所设置的自定义值将被忽略，系统将会使用默认值medium-dpi来显示。

另外，在搜寻这个属性的同事，从网上得到的另一个信息是关于WEBKIT对于这个属性不再进行支持，具体信息如下：

https://lists.webkit.org/pipermail/webkit-dev/2012-June/020914.html
There's some concern that target-densitydpi is used by some apps that
are bundled with Android, but folks appear willing to deprecate the
feature and to migrate those apps to using other mechanisms, such as
responsive images and CSS device units.

不过，经过我个人测试至少android目前的4.1.2对这个属性还是会有支持，或许之前的老版本也会有支持！

以上信息都是经过个人测试得到，如果有不同的见解，也希望大家能进行交流，谢谢！

另外，对于WEBKIT不在再这个属性的另一个解决办法是网络上提到比较多的二种方案：

1、responsive images

2、CSS device units

参考链接：http://www.jb51.net/article/121515.htm

参考链接：http://www.jb51.net/article/121531.htm

这二个东西到底如何，我也将会做进一步的了解。以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对我们的支持!

赞 (0)

相关推荐

  • 自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

    一.先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width. 其中我们可以获取phys.width即width通过document.documentElement.clientWidth;而获取css-width通过 window.screen.width获取.如iphone6的phys.width为750px,而css-width为375px. 二.明白一个浏览器默认行为. 试

  • JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码

    手机的屏幕有大有小,移动web最好做成响应式布局,也就是自适应屏幕,没有固定宽高,这样的话,在所有手机上都可以正常显示.关于移动端页面按手机屏幕分辨率自动缩放的js,先附上代码 <script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.screen.height); var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率 var u

  • Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结（附代码）

    可能大家发现自己制作的手机端页面,默认打开的时候并不是在理想的缩放状态下. 遇到这样的问题,需要在head标签下,添加meta解决. 代码如下: <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0″/> //控制默认缩放大小.最小缩放大小.最大缩放大小.通过这个可以设置用户的最大和最小缩放程度. <

  • jQuery实现响应浏览器缩放大小并改变背景颜色

    /*Javascript代码片段*/ //定义一个方法:这个方法控制浏览器页面背景色的切换变化 function myfunction(){ $('body').toggleClass('bgcolor'); } //添加监控页面窗口变化的方法 $(window).resize(myfunction); //并且在页面加载时即调用 myfunction();

  • 浏览器缩放检测的js代码

    测试代码 http://jsbin.com/dipijeqi/11 效果: chrome 复制代码 代码如下: window.devicePixelRatio : 2  (准确) screen.deviceXDPI / screen.logicalXDPI : NaN window.outerWidth / window.innerWidth : 2 document.documentElement.offsetHeight / window.innerHeight : 0.0206185567

  • java 查询oracle数据库所有表DatabaseMetaData的用法(详解)

    一 . 得到这个对象的实例 Connection con ; con = DriverManager.getConnection(url,userName,password); DatabaseMetaData dbmd = con.getMetaData(); 二. 方法getTables的用法 原型: ResultSet DatabaseMetaData.getTables(String catalog,String schema,String tableName,String []type

  • Javascript中window.name属性详解

    关于window下自带name的属性 不知道大家有没有发现这样一种情况 在控制台里直接输出未声明变量,正常情况应该是会报错的,而且声明未赋值的变量输出应该是undefined var a; //undefined b; //报错 但是偏偏就个别特例,就是name属性 其实window自身就带有name这个属性,在控制台输入window可以可以看到 打开 往下翻就可以找到 window.name直译过来是窗口名字,主要用于为超链接和表单设置目标(targets),什么意思呢,我们做个案例 建立两个

  • 基于Java中的StringTokenizer类详解(推荐)

    StringTokenizer是字符串分隔解析类型,属于:Java.util包. 1.StringTokenizer的构造函数 StringTokenizer(String str):构造一个用来解析str的StringTokenizer对象.java默认的分隔符是"空格"."制表符('\t')"."换行符('\n')"."回车符('\r')". StringTokenizer(String str,String delim)

  • Spring Cloud 中@FeignClient注解中的contextId属性详解

    目录 @FeignClient注解中的contextId属性 解决方法一 解决方法二 FeignClient注解及参数问题 问题背景 解决办法 @FeignClient注解中的contextId属性 在使用@FeignClient注解前,我们需要先引入其相关依赖,版本为3.0.1 <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter

  • Vue中的computed属性详解

    Vue中的computed属性详解

    目录 插值表达式 methods computed 总结 今天来说说vue中的计算属性computed,为了更好的理解计算属性的好处,我们先通过一个案例来慢慢 了解计算属性,有如下案例:定义两个输入框以及一个span标签,span标签中的内容为两个输入框中的值,span标签中的内容随着输入框中的内容变化而变化 插值表达式 我们先用插值表达式的方法来实现这一效果 <body> <div id="app"> 姓: <input type="text&

  • 如何直接访问php实例对象中的private属性详解

    前言 本文主要介绍了关于如何直接访问php实例对象中private属性的相关内容,在介绍关键部分之前,我们先回顾一下php面向对象的访问控制. 对属性或方法的访问控制,是通过在前面添加关键字 public(公有),protected(受保护)或 private(私有)来实现的.被定义为公有的类成员可以在任何地方被访问.被定义为受保护的类成员则可以被其自身以及其子类和父类访问.被定义为私有的类成员则只能被其定义所在的类访问. 类属性必须定义为公有,受保护,私有之一.如果用 var 定义,则被视为公

  • Android中的windowSoftInputMode属性详解

    Android中的windowSoftInputMode属性详解

    在前面的一篇文章中,简单的介绍了一下如何实现软键盘不自动弹出,使用的方法是设置android:windowSoftInputMode属性.那么,这个属性到底是干什么的,他有什么作用呢?今天这篇文章,就是探索android:windowSoftInputMode属性的作用的. 首先,我们从这个属性的名称中,可以很直观的看出它的作用,这个属性就是来设置窗口软键盘的交互模式的. android:windowSoftInputMode属性一共有9个取值,分别是: stateUnspecified,sta

  • react-router中<Link/>的属性详解

    本文主要给大家介绍了关于react-router中 的属性的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 使用Link标签 // 字符串定位描述符 String location descriptor. <Link to="/hello"> Hello </Link> // 对象定位描述符 Object location descriptor. <Link to={{ pathname: '/hello', query: { name: '

  • ASP.NET 4.0配置文件中的ClientIDMode属性详解

    时光流逝,我们心爱的ASP.NET也步入了4.0的时代,微软在ASP.NET 4.0中对很多特性做了修改.比如我将要讨论的控件ID机制就是其中之一. 在ASP.NET 4.0之前我们总是要为控件的ClientID头疼,比如明明一个叫lblName的Label放在一个叫做grd的GridView里面后,在页面上改Label的ID就变成了诸如grd_clt02_lblName的一长串字符串,如果我们在前台想在使用JS的时候找到该Label,我们不得不用到C#脚本来获得该Label在前台的确切ID,诸

  • 深入浅析Python中join 和 split详解(推荐)

    python join 和 split方法简单的说是:join用来连接字符串,split恰好相反,拆分字符串的. .join() join将 容器对象 拆分并以指定的字符将列表内的元素(element)连接起来,返回字符串(注:容器对象内的元素须为字符类型) >>> a = ['no','pain','no','gain'] >>> '_ '.join(a) 'no_pain_no_gain' >>> 注:容器对象内的元素须为字符类型 >>

  • 关于meta viewport中target-densitydpi属性详解（推荐）

    关于meta viewport中target-densitydpi属性详解（推荐）

    前段时间在做WAP页面,发现页面设置了meta viewport中的大众属性,即: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" >  但发现页面依旧不根据手机屏幕进行自动缩放,后来找其他同事帮忙解决了,我看了源代码发现了是在原来的viewport中增加了target-densitydpi属性.看之初不太了解,也因为当时自己手

随机推荐