关于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中的array数组使用技巧
Jan 31 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
微信小程序实现购物车小功能
Dec 30 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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
PHP ajax 分页类代码
2008/11/13 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
聊聊Python中的pypy
2018/01/12 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
策划创业计划书
2014/02/06 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
员工年终考核评语
2014/12/31 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
2015初中团支部工作总结
2015/07/21 职场文书