前段時間在做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ù)手機屏幕進(jìn)行自動縮放，后來找其他同事幫忙解決了，我看了源代碼發(fā)現(xiàn)了是在原來的viewport中增加了target-densitydpi屬性?？粗醪惶私猓惨驗楫?dāng)時自己手上有其他需求在處理，最近突然想起了這件事，準(zhǔn)備對它做一些了解，以備不時之需。
首先來了解一下這個屬性到底是做什么的，從網(wǎng)上摘錄了一段簡介，如下：
一個屏幕像素密度是由屏幕分辨率決定的，通常定義為每英寸點的數(shù)量（dpi）。Android支持三種屏幕像素密度：低像素密度，中像素密度，高像素密度。一個低像素密度的屏幕每英寸上的像素點更少，而一個高像素密度的屏幕每英寸上的像素點更多。android Browser和WebView默認(rèn)屏幕為中像素密度。
下面是 target-densitydpi 屬性的 取值范圍
device-dpi –使用設(shè)備原本的 dpi 作為目標(biāo) dp。 不會發(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> – 指定一個具體的dpi 值作為target dpi. 這個值的范圍必須在70–400之間。
注：以上信息取自//www.gxlcms.com/html5/177188.html
上面的信息我也從android官網(wǎng)找到了相關(guān)資料，這個資料在上面URL頁面中都進(jìn)行了翻譯！
從這段簡介可以得到如下信息：
1、它是指的屏幕分辨率，現(xiàn)在絕大多數(shù)智能手機屏幕都是可以通過viewport中的width來頁面寬度的調(diào)整，其實我的理解就是調(diào)整屏幕顯示該頁面的分辨率，只是這個值不是直觀來設(shè)置，而是瀏覽器通過width值來進(jìn)行計算得出。
2、這個屬性只對android系統(tǒng)起作用，專有屬性。iOS不支持它，所以說起來，還是有兼容性問題，如果頁面是兼容ios和android的話。
3、這個屬性取值還挺多的，不過，一般個人使用較多的可能會是第五種，即自定義，因為這個不需要記住前端四個值的單詞。
有了這些信息，我也拿出了三星i9100進(jìn)行了測試，效果如下：
先貼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-dpi70
360400
系統(tǒng)自帶（android 4.1.2）
所有屬性都有支持，具體情況如下：
device-dpihigh-dpimedium-dpilow-dpi70
360400
查看測試時，雖然同時注意圖片與文字大小的變化！
總結(jié)：
從各瀏覽器的測試效果來看，只有android WEB和UC支持這個屬性，依目前國內(nèi)手機瀏覽器的占比來看，UC使用率還是非常高的，所以，在android方面使用這個屬性去解決問題的話，還是可以得到大面積支持的。另外關(guān)于這個屬性中最后一個自定義取值，當(dāng)值超過最大值400或小于最小值70的時候，所設(shè)置的自定義值將被忽略，系統(tǒng)將會使用默認(rèn)值medium-dpi來顯示。
另外，在搜尋這個屬性的同事，從網(wǎng)上得到的另一個信息是關(guān)于WEBKIT對于這個屬性不再進(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)過我個人測試至少android目前的4.1.2對這個屬性還是會有支持，或許之前的老版本也會有支持！
以上信息都是經(jīng)過個人測試得到，如果有不同的見解，也希望大家能進(jìn)行交流，謝謝！
另外，對于WEBKIT不在再這個屬性的另一個解決辦法是網(wǎng)絡(luò)上提到比較多的二種方案：
1、responsive images
2、CSS device units
參考鏈接：//www.gxlcms.com/article/121515.htm
參考鏈接：//www.gxlcms.com/article/121531.htm
這二個東西到底如何，我也將會做進(jìn)一步的了解。
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
