关于meta viewport中target-densitydpi属性详解(推荐)


Posted in Javascript onAugust 18, 2017

前段时间在做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://3water.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版()
属性的所有取值都不支持!

效果:

关于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://3water.com/article/121531.htm

这二个东西到底如何,我也将会做进一步的了解。以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

Javascript 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
再谈ie和firefox下的document.all属性
Oct 21 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
Angular的$http与$location
Dec 26 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
vue form check 表单验证的实现代码
Dec 09 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 #Javascript
JS实现页面打印(整体、局部)
Aug 18 #Javascript
简单实现jQuery轮播效果
Aug 18 #jQuery
JavaScript编写的网页小游戏,很给力
Aug 18 #Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 #Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 #Javascript
简单实现jQuery手风琴效果
Aug 18 #jQuery
You might like
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
举例讲解Python中装饰器的用法
2015/04/27 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
Django 拆分model和view的实现方法
2019/08/16 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python多线程获取返回值代码实例
2020/02/17 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
生物化工工艺专业应届生求职信
2013/10/08 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
买卖协议书范本
2014/04/21 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
幼师求职信
2014/06/23 职场文书
小学领导班子对照材料
2014/08/23 职场文书
面试复试通知单
2015/04/24 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
接收函
2019/04/22 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android