html5 dpi,关于meta viewport中target-densitydpi属性详解(推荐)_哒哒_前端开发者
前段时间在做WAP页面,发现页面设置了meta viewport中的大众属性,即:
但发现页面依旧不根据手机屏幕进行自动缩放,后来找其他同事帮忙解决了,我看了源代码发现了是在原来的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。中等像素密度和高像素密度设备相应放大。
– 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。
注:以上信息取自//www.jb51.net/html5/177188.
上面的信息我也从android官网找到了相关资料,这个资料在上面URL页面中都进行了翻译!
从这段简介可以得到如下信息:
1、它是指的屏幕分辨率,现在绝大多数智能手机屏幕都是可以通过viewport中的width来页面宽度的调整,其实我的理解就是调整屏幕显示该页面的分辨率,只是这个值不是直观来设置,而是浏览器通过width值来进行计算得出。
2、这个
3、这个属性取值还挺多的,不过,一般个人使用较多的可能会是第五种,即自定义,因为这个不需要记住前端四个值的单词。
有了这些信息,我也拿出了三星i9100进行了测试,效果如下:
先贴
/p>
chrome android版()
属性的所有取值都不支持!
效果:
UC(最新版V9.1)
所有属性都有支持,具体情况如下:
device-dpihigh-dpimedium-dpilow-dpi70
360400
系统自带(android 4.1.2)
所有属性都有支持,具体情况如下:
device-dpihigh-dpimedium-dpilow-dpi70
360400
查看测试时,虽然同时注意图片与文字大小的变化!
总结:
从各浏览器的测试效果来看,只有android
另外,在搜寻这个属性的同事,从网上得到的另一个信息是关于WEBKIT对于这个属性不再进行支持,具体信息如下:
https://lists.webkit.org/pipermail/webkit-dev/2012-June/020914.
不过,经过我个人测试至少android目前的4.1.2对这个属性还是会有支持,或许之前的老版本也会有支持!
以上信息都是经过个人测试得到,如果有不同的见解,也希望大家能进行交流,谢谢!
另外,对于WEBKIT不在再这个属性的另一个解决办法是网络上提到比较多的二种方案:
1、responsive images
2、
参考链接://www.jb51.net/article/121515.htm
参考链接://www.jb51.net/article/121531.htm
这二个东西到底如何,我也将会做进一步的了解。以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对前端开发者的支持!
html5 dpi,关于meta viewport中target-densitydpi属性详解(推荐)_哒哒_前端开发者相关推荐
- Vue 中的 ref 属性详解
Vue 中的 ref 属性详解 我们先来读一下vue的官方文档 我们来分析官方文档 首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值. 通俗的将就 ...
- stringtokenizer java_基于Java中的StringTokenizer类详解(推荐)
StringTokenizer是字符串分隔解析类型,属于:Java.util包. 1.StringTokenizer的构造函数 StringTokenizer(String str):构造一个用来解析 ...
- android中xml tools属性详解
第一部分 安卓开发中,在写布局代码的时候,ide可以看到布局的预览效果. 但是有些效果则必须在运行之后才能看见,比如这种情况:TextView在xml中没有设置任何字符,而是在activity中设置了 ...
- android中xmlns:tools属性详解
第一部分 安卓开发中,在写布局代码的时候,ide可以看到布局的预览效果. 但是有些效果则必须在运行之后才能看见,比如这种情况:TextView在xml中没有设置任何字符,而是在activity中设置了 ...
- [暑假]<script>标签中的type属性详解
type属性是必须写的属性吗? 不写的情况: <script>标签中的type属性不是必须写的属性, 因为按照惯例,这个值始终都是"text/javascript", ...
- Vuex中的mutations属性详解
一.mutations属性介绍 是唯一一种方式来修改state中的状态的:在组件的自定义方法中,使用this.$store.commit('对应mutations中的方法', 新的值)方法,把新的值提 ...
- html5属性详解,HTML5中的download属性详解
一.download属性是个什么? 如果我们想实现点击上面的下载按钮下载一张图片,你会如何实现? 我们可能会想到一个最简单的方法,就是直接按钮a标签链接一张图片,类似下面这样: 下载 但是,想法虽好, ...
- Vuex中的state属性详解
一.state属性介绍 state属性是Vuex中用于存放组件之间共享的数据:也就是说,我们把一些组件之间共享的状态主要存放在state属性中:它采用的是单一状态树--用一个对象就包含了全部的应用层级 ...
- Android中的windowSoftInputMode属性详解
如何实现软键盘不自动弹出,使用的方法是设置android:windowSoftInputMode属性.那么,这个属性到底是干什么的,他有什么作用呢?今天这篇文章,就是探索android:windowS ...
最新文章
- 怎样打开win7和vista系统的telnet服务
- 如何使用 Kafka、MongoDB 和 Maxwell’s Daemon 构建 SQL 数据库的审计系统
- Android应用开发-onNewIntent()
- python战斗2:看到一个页面编码
- 鸿蒙移植mate10,鸿蒙系统+麒麟1020再升一个台阶,华为Mate30黯然神伤无奈下跌
- HTTP幂等性概念和应用
- 网络聊天室(基于多进程TCP)
- 博客页面添加动态小人,二次元人物 hexo live2d html人物公仔
- 用javascript实现九九乘法口诀表
- axios处理特大数据碰到的问题
- 数据填报不用愁,帆软报表来解忧!
- 2021年安徽省职业院校技能大赛网络搭建与应用竞赛
- CAD中插入外部参照字体会变繁体_CAD插入外部参照失败?
- 结合NAACL2022对计算语言学趋势的思考与分析
- 微信图片 自动上传到服务器,微信小程序怎样使图片上传至服务器
- markdown 合并单元格、表格内换行
- SQLServer update语句用法
- 合工大苍穹战队视觉组培训Day9——相机标定
- SimpleRNN实现股票预测
- 传智播客凭什么改变IT教育