关于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 相关文章推荐
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
jQuery实现大图轮播
Feb 13 Javascript
Node.js Express安装与使用教程
May 11 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
自适应布局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 实现explort() 功能的详解
2013/06/20 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
javascript定义函数的方法
2010/12/06 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
Python 异常处理实例详解
2014/03/12 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
python实现推箱子游戏
2020/03/25 Python
python实现图片识别汽车功能
2018/11/30 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
python识别验证码图片实例详解
2020/02/17 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
预备党员入党思想汇报
2014/01/04 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
责任书格式
2015/01/29 职场文书
收银员岗位职责范本
2015/04/07 职场文书
我收到了德劲DE1107
2022/04/05 无线电