關(guān)于meta viewport中target-densitydpi屬性詳解（推薦）
前段時(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)縮放，后來(lái)找其他同事幫忙解決了，我看了源代碼發(fā)現(xiàn)了是在原來(lái)的viewport中增加了target-densitydpi屬性?？粗醪惶私猓惨?yàn)楫?dāng)時(shí)自己手上有其他需求在處理，最近突然想起了這件事，準(zhǔn)備對(duì)它做一些了解，以備不時(shí)之需。
首先來(lái)了解一下這個(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://m.fzitv.net/html5/177188.html
上面的信息我也從android官網(wǎng)找到了相關(guān)資料，這個(gè)資料在上面URL頁(yè)面中都進(jìn)行了翻譯！
從這段簡(jiǎn)介可以得到如下信息：
1、它是指的屏幕分辨率，現(xiàn)在絕大多數(shù)智能手機(jī)屏幕都是可以通過(guò)viewport中的width來(lái)頁(yè)面寬度的調(diào)整，其實(shí)我的理解就是調(diào)整屏幕顯示該頁(yè)面的分辨率，只是這個(gè)值不是直觀來(lái)設(shè)置，而是瀏覽器通過(guò)width值來(lái)進(jìn)行計(jì)算得出。
2、這個(gè)屬性只對(duì)android系統(tǒng)起作用，專有屬性。iOS不支持它，所以說(shuō)起來(lái)，還是有兼容性問(wèn)題，如果頁(yè)面是兼容ios和android的話。
3、這個(gè)屬性取值還挺多的，不過(guò)，一般個(gè)人使用較多的可能會(huì)是第五種，即自定義，因?yàn)檫@個(gè)不需要記住前端四個(gè)值的單詞。
有了這些信息，我也拿出了三星i9100進(jìn)行了測(cè)試，效果如下：
先貼HTML結(jié)構(gòu)：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(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-dpi70
360400
系統(tǒng)自帶（android 4.1.2）
所有屬性都有支持，具體情況如下：
device-dpihigh-dpimedium-dpilow-dpi70
360400
查看測(cè)試時(shí)，雖然同時(shí)注意圖片與文字大小的變化！
總結(jié)：
從各瀏覽器的測(cè)試效果來(lái)看，只有android WEB和UC支持這個(gè)屬性，依目前國(guó)內(nèi)手機(jī)瀏覽器的占比來(lái)看，UC使用率還是非常高的，所以，在android方面使用這個(gè)屬性去解決問(wèn)題的話，還是可以得到大面積支持的。另外關(guān)于這個(gè)屬性中最后一個(gè)自定義取值，當(dāng)值超過(guò)最大值400或小于最小值70的時(shí)候，所設(shè)置的自定義值將被忽略，系統(tǒng)將會(huì)使用默認(rèn)值medium-dpi來(lái)顯示。
另外，在搜尋這個(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.
不過(guò)，經(jīng)過(guò)我個(gè)人測(cè)試至少android目前的4.1.2對(duì)這個(gè)屬性還是會(huì)有支持，或許之前的老版本也會(huì)有支持！
以上信息都是經(jīng)過(guò)個(gè)人測(cè)試得到，如果有不同的見(jiàn)解，也希望大家能進(jìn)行交流，謝謝！
另外，對(duì)于WEBKIT不在再這個(gè)屬性的另一個(gè)解決辦法是網(wǎng)絡(luò)上提到比較多的二種方案：
1、responsive images
2、CSS device units
參考鏈接：http://m.fzitv.net/article/121515.htm
參考鏈接：http://m.fzitv.net/article/121531.htm
這二個(gè)東西到底如何，我也將會(huì)做進(jìn)一步的了解。以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助~如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持!
- 解決PhoneGap不支持viewport的幾種方法
- 深入理解移動(dòng)前端開(kāi)發(fā)之viewport
- 詳解jquery插件jquery.viewport.js學(xué)習(xí)使用方法
- 自適應(yīng)布局meta標(biāo)簽中viewport、content、width、initial-scale、minimum-scale、maximum-scale總結(jié)
- 通過(guò)viewport實(shí)現(xiàn)jsp頁(yè)面支持手機(jī)縮放
- 關(guān)于viewport,Ext.panel和Ext.form.panel的關(guān)系
- ExtJs 學(xué)習(xí)筆記 Ext.Panle Ext.TabPanel Ext.Viewport
- 如何基于viewport vm適配移動(dòng)端頁(yè)面
相關(guān)文章
圖例組件展現(xiàn)了不同系列的標(biāo)記(symbol),顏色和名字,可以通過(guò)點(diǎn)擊圖例控制哪些系列不顯示,這篇文章主要給大家介紹了關(guān)于Echarts圖例組件的相關(guān)資料,需要的朋友可以參考下2021-06-06
手把手教你搭建ES6的開(kāi)發(fā)運(yùn)行環(huán)境
如今ES6已經(jīng)發(fā)布了有一段時(shí)間了，很多人學(xué)了ES6但是卻沒(méi)運(yùn)行環(huán)境，下面這篇文章主要給大家介紹了關(guān)于搭建ES6運(yùn)行環(huán)境的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
JavaScript中數(shù)組對(duì)象的那些自帶方法介紹
數(shù)組對(duì)象自帶方法想必大家都有所耳聞,今天主要為大家介紹下JavaScript中數(shù)組對(duì)象的那些自帶方法，感興趣的你可以參考下哈，希望可以幫助你學(xué)習(xí)javascript2013-03-03
TypeScript中的交叉類型和聯(lián)合類型示例講解
交叉類型簡(jiǎn)單來(lái)說(shuō)就是通過(guò)&符號(hào)將多個(gè)類型進(jìn)行合并成一個(gè)類型，然后用type來(lái)聲明新生成的類型，聯(lián)合類型和交叉類型比較相似，聯(lián)合類型通過(guò)|符號(hào)連接多個(gè)類型從而生成新的類型，本文就這兩個(gè)類型結(jié)合示例代碼詳細(xì)講解，感興趣的朋友跟隨小編一起學(xué)習(xí)吧2022-12-12
使用js/jquery獲取指定class名稱的3種方式總結(jié)
獲取class的值其實(shí)非常簡(jiǎn)單,這篇文章主要給大家介紹了關(guān)于總結(jié)使用js/jquery獲取指定class名稱的3種方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
JS作用域閉包、預(yù)解釋和this關(guān)鍵字綜合實(shí)例解析
這篇文章主要介紹了JS作用域閉包、預(yù)解釋和this關(guān)鍵字,結(jié)合實(shí)例形式分析了javascript作用域閉包、預(yù)解釋和this關(guān)鍵字在具體使用過(guò)程中的操作技巧與注意事項(xiàng),需要的朋友可以參考下2016-12-12
實(shí)用Javascript調(diào)試技巧分享(小結(jié))
這篇文章主要介紹了實(shí)用Javascript調(diào)試技巧分享(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
獲取select元素被選中的文本內(nèi)容的方法有很多，本文為大家介紹下使用javascript來(lái)輕松實(shí)現(xiàn)下2014-01-01
微信小程序云開(kāi)發(fā)如何實(shí)現(xiàn)數(shù)據(jù)庫(kù)自動(dòng)備份實(shí)現(xiàn)
這篇文章主要介紹了小程序云開(kāi)發(fā) 數(shù)據(jù)庫(kù)自動(dòng)備份實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
uniapp?app?人臉識(shí)別的實(shí)現(xiàn)示例
本文主要介紹了uniapp?app?人臉識(shí)別的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05