html5 dpi,关于meta viewport中target-densitydpi属性详解（推荐）_哒哒_前端开发者

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

但发现页面依旧不根据手机屏幕进行自动缩放，后来找其他同事帮忙解决了，我看了源代码发现了是在原来的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。中等像素密度和高像素密度设备相应放大。

– 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。

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

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

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

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

2、这个

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

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

先贴

/p>

chrome android版()

属性的所有取值都不支持！

效果：

UC(最新版V9.1)

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

device-dpihigh-dpimedium-dpilow-dpi70

360400

系统自带(android 4.1.2)

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

device-dpihigh-dpimedium-dpilow-dpi70

360400

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

总结：

从各浏览器的测试效果来看，只有android

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

https://lists.webkit.org/pipermail/webkit-dev/2012-June/020914.

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

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

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

1、responsive images

2、

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

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

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