點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

關于meta viewport中target-densitydpi屬性詳解（推薦）

來源：懂視網責編：小采時間：2020-11-27 22:32:13

關于meta viewport中target-densitydpi屬性詳解（推薦）

關于meta viewport中target-densitydpi屬性詳解（推薦）:前段時間在做WAP頁面，發現頁面設置了meta viewport中的大眾屬性，即： <meta name=viewport content=width=device-width, initial-scale=1.0, user-scalable=no > 但發現頁面依舊不根據手機屏幕進行自動縮放，后來找其他同事

推薦度：

點擊下載本文 文檔為doc格式

導讀關于meta viewport中target-densitydpi屬性詳解（推薦）:前段時間在做WAP頁面，發現頁面設置了meta viewport中的大眾屬性，即： <meta name=viewport content=width=device-width, initial-scale=1.0, user-scalable=no > 但發現頁面依舊不根據手機屏幕進行自動縮放，后來找其他同事

前段時間在做WAP頁面，發現頁面設置了meta viewport中的大眾屬性，即：

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

但發現頁面依舊不根據手機屏幕進行自動縮放，后來找其他同事幫忙解決了，我看了源代碼發現了是在原來的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。中等像素密度和高像素密度設備相應放大。
<value> – 指定一個具體的dpi 值作為target dpi. 這個值的范圍必須在70–400之間。

注：以上信息取自//www.gxlcms.com/html5/177188.html

上面的信息我也從android官網找到了相關資料，這個資料在上面URL頁面中都進行了翻譯！

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

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

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

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

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

先貼HTML結構：

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

系統自帶（android 4.1.2）

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

device-dpihigh-dpimedium-dpilow-dpi70360400

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

總結：

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

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

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

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

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

1、responsive images

2、CSS device units

參考鏈接：//www.gxlcms.com/article/121515.htm

參考鏈接：//www.gxlcms.com/article/121531.htm

這二個東西到底如何，我也將會做進一步的了解。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com