主页 > 前端 > javascript >
来源：自学PHP网 时间：2017-08-21 09:35 作者： 阅读:次
[导读] 这篇文章主要介绍了关于meta viewport中target-densitydpi属性详解，通过不同的缩放比例实现了不同的预览效果，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。...
|
前段时间在做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。 不会发生默认缩放。 上面的信息我也从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版（） 效果：
UC（最新版V9.1） 所有属性都有支持，具体情况如下： device-dpihigh-dpimedium-dpilow-dpi70 系统自带（android 4.1.2） 所有属性都有支持，具体情况如下： device-dpihigh-dpimedium-dpilow-dpi70 查看测试时，虽然同时注意图片与文字大小的变化！ 总结： 从各浏览器的测试效果来看，只有android WEB和UC支持这个属性，依目前国内手机浏览器的占比来看，UC使用率还是非常高的，所以，在android方面使用这个属性去解决问题的话，还是可以得到大面积支持的。另外关于这个属性中最后一个自定义取值，当值超过最大值400或小于最小值70的时候，所设置的自定义值将被忽略，系统将会使用默认值medium-dpi来显示。 另外，在搜寻这个属性的同事，从网上得到的另一个信息是关于WEBKIT对于这个属性不再进行支持，具体信息如下： https://lists.webkit.org/pipermail/webkit-dev/2012-June/020914.html 不过，经过我个人测试至少android目前的4.1.2对这个属性还是会有支持，或许之前的老版本也会有支持！ 以上信息都是经过个人测试得到，如果有不同的见解，也希望大家能进行交流，谢谢！ 另外，对于WEBKIT不在再这个属性的另一个解决办法是网络上提到比较多的二种方案： 1、responsive images 2、CSS device units |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
360400
360400
