关于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 相关文章推荐
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
js中文逗号转英文实现
Feb 11 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
vue点击页面空白处实现保存功能
Nov 06 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代码的53条建议
2008/03/27 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
python爬取微博评论的实例讲解
2021/01/15 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
幼儿园中秋节活动方案
2014/02/06 职场文书
英语故事演讲稿
2014/04/29 职场文书
五一口号
2014/06/19 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
赢在中国观后感
2015/06/02 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android