快捷導(dǎo)航

關(guān)于meta viewport中target-densitydpi屬性詳解（推薦）

更新時(shí)間：2017年08月18日 11:01:01 作者：痞子前端

這篇文章主要介紹了關(guān)于meta viewport中target-densitydpi屬性詳解，通過不同的縮放比例實(shí)現(xiàn)了不同的預(yù)覽效果，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。

前段時(shí)間在做WAP頁(yè)面，發(fā)現(xiàn)頁(yè)面設(shè)置了meta viewport中的大眾屬性，即：

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

但發(fā)現(xiàn)頁(yè)面依舊不根據(jù)手機(jī)屏幕進(jìn)行自動(dòng)縮放，后來找其他同事幫忙解決了，我看了源代碼發(fā)現(xiàn)了是在原來的viewport中增加了target-densitydpi屬性?？粗醪惶私?，也因?yàn)楫?dāng)時(shí)自己手上有其他需求在處理，最近突然想起了這件事，準(zhǔn)備對(duì)它做一些了解，以備不時(shí)之需。

首先來了解一下這個(gè)屬性到底是做什么的，從網(wǎng)上摘錄了一段簡(jiǎn)介，如下：

一個(gè)屏幕像素密度是由屏幕分辨率決定的，通常定義為每英寸點(diǎn)的數(shù)量（dpi）。Android支持三種屏幕像素密度：低像素密度，中像素密度，高像素密度。一個(gè)低像素密度的屏幕每英寸上的像素點(diǎn)更少，而一個(gè)高像素密度的屏幕每英寸上的像素點(diǎn)更多。android Browser和WebView默認(rèn)屏幕為中像素密度。

下面是 target-densitydpi 屬性的取值范圍

device-dpi –使用設(shè)備原本的 dpi 作為目標(biāo) dp。不會(huì)發(fā)生默認(rèn)縮放。
high-dpi – 使用hdpi 作為目標(biāo) dpi。中等像素密度和低像素密度設(shè)備相應(yīng)縮小。
medium-dpi – 使用mdpi作為目標(biāo) dpi。高像素密度設(shè)備相應(yīng)放大，像素密度設(shè)備相應(yīng)縮小。這是默認(rèn)的target density.
low-dpi -使用mdpi作為目標(biāo) dpi。中等像素密度和高像素密度設(shè)備相應(yīng)放大。
<value> – 指定一個(gè)具體的dpi 值作為target dpi. 這個(gè)值的范圍必須在70–400之間。

注：以上信息取自http://www.dbjr.com.cn/html5/177188.html

上面的信息我也從android官網(wǎng)找到了相關(guān)資料，這個(gè)資料在上面URL頁(yè)面中都進(jìn)行了翻譯！

從這段簡(jiǎn)介可以得到如下信息：

1、它是指的屏幕分辨率，現(xiàn)在絕大多數(shù)智能手機(jī)屏幕都是可以通過viewport中的width來頁(yè)面寬度的調(diào)整，其實(shí)我的理解就是調(diào)整屏幕顯示該頁(yè)面的分辨率，只是這個(gè)值不是直觀來設(shè)置，而是瀏覽器通過width值來進(jìn)行計(jì)算得出。

2、這個(gè)屬性只對(duì)android系統(tǒng)起作用，專有屬性。iOS不支持它，所以說起來，還是有兼容性問題，如果頁(yè)面是兼容ios和android的話。

3、這個(gè)屬性取值還挺多的，不過，一般個(gè)人使用較多的可能會(huì)是第五種，即自定義，因?yàn)檫@個(gè)不需要記住前端四個(gè)值的單詞。

有了這些信息，我也拿出了三星i9100進(jìn)行了測(cè)試，效果如下：

先貼HTML結(jié)構(gòu)：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>無標(biāo)題文檔</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>如果你要為網(wǎng)頁(yè)針對(duì)不同屏幕分辨率修改，用 -webkit-device-pixel-ratio這個(gè)media標(biāo)簽或在js中用 window.devicePixelRatio這個(gè)方法，設(shè)置target-densitydpi標(biāo)簽和device-dpi屬性。這讓你的定制更具有靈活性。</p> 
<p>在iOS中有兩個(gè)meta值， apple-mobile-web-app-capable 和apple-mobile-web-app-status-bar-style，這兩個(gè)會(huì)讓網(wǎng)頁(yè)內(nèi)容以應(yīng)用程序風(fēng)格顯示，并使?fàn)顟B(tài)欄透明。</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

系統(tǒng)自帶（android 4.1.2）

所有屬性都有支持，具體情況如下：

device-dpihigh-dpimedium-dpilow-dpi70360400

查看測(cè)試時(shí)，雖然同時(shí)注意圖片與文字大小的變化！

總結(jié)：

從各瀏覽器的測(cè)試效果來看，只有android WEB和UC支持這個(gè)屬性，依目前國(guó)內(nèi)手機(jī)瀏覽器的占比來看，UC使用率還是非常高的，所以，在android方面使用這個(gè)屬性去解決問題的話，還是可以得到大面積支持的。另外關(guān)于這個(gè)屬性中最后一個(gè)自定義取值，當(dāng)值超過最大值400或小于最小值70的時(shí)候，所設(shè)置的自定義值將被忽略，系統(tǒng)將會(huì)使用默認(rèn)值medium-dpi來顯示。

另外，在搜尋這個(gè)屬性的同事，從網(wǎng)上得到的另一個(gè)信息是關(guān)于WEBKIT對(duì)于這個(gè)屬性不再進(jìn)行支持，具體信息如下：

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.

不過，經(jīng)過我個(gè)人測(cè)試至少android目前的4.1.2對(duì)這個(gè)屬性還是會(huì)有支持，或許之前的老版本也會(huì)有支持！

以上信息都是經(jīng)過個(gè)人測(cè)試得到，如果有不同的見解，也希望大家能進(jìn)行交流，謝謝！

另外，對(duì)于WEBKIT不在再這個(gè)屬性的另一個(gè)解決辦法是網(wǎng)絡(luò)上提到比較多的二種方案：

1、responsive images

2、CSS device units

參考鏈接：http://www.dbjr.com.cn/article/121515.htm

參考鏈接：http://www.dbjr.com.cn/article/121531.htm

這二個(gè)東西到底如何，我也將會(huì)做進(jìn)一步的了解。以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助~如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持!

您可能感興趣的文章: