快活林资源网

关于meta viewport中target-densitydpi属性详解（推荐）
网络编程 2025/1/12 佚名
3 1
快活林资源网 Design By www.csstdc.com

前段时间在做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之间。

注：以上信息取自https://www.jb51.net/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="/UploadFiles/2021-04-02/mm1.jpg">


chrome android版（）

属性的所有取值都不支持！


效果：


关于meta viewport中target-densitydpi属性详解（推荐）









UC（最新版V9.1）


所有属性都有支持，具体情况如下：


device-dpihigh-dpimedium-dpilow-dpi70关于meta viewport中target-densitydpi属性详解（推荐）关于meta viewport中target-densitydpi属性详解（推荐）关于meta viewport中target-densitydpi属性详解（推荐）关于meta viewport中target-densitydpi属性详解（推荐）关于meta viewport中target-densitydpi属性详解（推荐）360400关于meta viewport中target-densitydpi属性详解（推荐）关于meta viewport中target-densitydpi属性详解（推荐）




系统自带（android 4.1.2）


所有属性都有支持，具体情况如下：


device-dpihigh-dpimedium-dpilow-dpi70关于meta viewport中target-densitydpi属性详解（推荐）关于meta viewport中target-densitydpi属性详解（推荐）关于meta viewport中target-densitydpi属性详解（推荐）关于meta viewport中target-densitydpi属性详解（推荐）关于meta viewport中target-densitydpi属性详解（推荐）360400关于meta viewport中target-densitydpi属性详解（推荐）关于meta viewport中target-densitydpi属性详解（推荐）




查看测试时，虽然同时注意图片与文字大小的变化！




总结：


从各浏览器的测试效果来看，只有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


参考链接：https://www.jb51.net/article/121515.htm


参考链接：https://www.jb51.net/article/121531.htm


这二个东西到底如何，我也将会做进一步的了解。以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对的支持!
快活林资源网 Design By www.csstdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
快活林资源网 Design By www.csstdc.com
www.csstdc.com 快活林资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
快活林资源网 Design By www.csstdc.com