快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

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

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

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

從這段簡介可以得到如下信息：

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

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

3、這個屬性取值還挺多的，不過，一般個人使用較多的可能會是第五種，即自定義，因為這個不需要記住前端四個值的單詞。

有了這些信息，我也拿出了三星i9100進行了測試，效果如下：

先貼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)頁針對不同屏幕分辨率修改，用 -webkit-device-pixel-ratio這個media標(biāo)簽或在js中用 window.devicePixelRatio這個方法，設(shè)置target-densitydpi標(biāo)簽和device-dpi屬性。這讓你的定制更具有靈活性。</p> 
<p>在iOS中有兩個meta值， apple-mobile-web-app-capable 和apple-mobile-web-app-status-bar-style，這兩個會讓網(wǎng)頁內(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

查看測試時，雖然同時注意圖片與文字大小的變化！

總結(jié)：

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

另外，在搜尋這個屬性的同事，從網(wǎng)上得到的另一個信息是關(guān)于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.

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

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

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

1、responsive images

2、CSS device units

參考鏈接：http://chabaoo.cn/article/121515.htm

參考鏈接：http://chabaoo.cn/article/121531.htm

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

您可能感興趣的文章: