pt：物理像素（电容屏上像素块个数）

px：逻辑像素、设备独立像素

高清屏：1px = 4pt

普通屏：1px = 1pt

dpr：设备像素比：（某一方向上）物理像素/逻辑像素

通常设置1rem=屏幕宽度*dpr/10；设置缩放，使1px与1pt相等。

例如：1rem 为 320*2/10=64px

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>动态设置rem参考和缩放</title>

        <meta name="viewport" content=""/>

        <link rel="stylesheet" href="css/h5.css" />

        <script type="text/javascript">

            var fontsize  =  window.screen.width * window.devicePixelRatio / 10;

　　            document.querySelector("html").style.fontSize = fontsize + "px";

            //console.log("dpr设备像素比"+window.devicePixelRatio)

            var scale = 1/window.devicePixelRatio;

            document.querySelector("meta[name='viewport']").setAttribute("content","width=device-width,initial-scale="+scale+",maximum-scale="+scale+",minimum-scale="+scale);

        </script>

    </head>

    <body>

    </body>

</html>

1、视网膜屏幕：分辨率超过人眼识别极限的高分辨率屏幕。

　　视网膜（Retina）屏幕是苹果公司"发明"的一个营销术语。并在部分移动产品使用。苹果这个术语用在iphone 4手机上，自此一直沿用，它将960×640的像素压缩到一个3.5英寸的显示屏内。也就是说，该屏幕的像素密度达到326像素/英寸（ppi），称之为“视网膜屏幕”。

2、ppi（pixels per inch）：每英寸长度所能够排列的像素（pixel）的数目。因此PPI数值越高，即代表显示屏能够以更高的密度显示图像。当然，显示的密度越高，拟真度就越高。pixels per inch是图像分辨率的单位，图像ppi值越高，单位面积的像素数量就越多，所以画面的细节就越丰富。

3、viewport：手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放所有的缩放值都必须在0.01–10的范围之内。

例：

(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)

<meta name="viewport" content="width=device-width,user-scalable=no" />

(设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)

<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

　　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之间。

例如：

<meta name="viewport" content="target-densitydpi=device-dpi" />
<meta name="viewport" content="target-densitydpi=high-dpi" />
<meta name="viewport" content="target-densitydpi=medium-dpi" />
<meta name="viewport" content="target-densitydpi=low-dpi" />
<meta name="viewport" content="target-densitydpi=200" />

　　为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。

4、devicePixelRatio：指的是window.devicePixelRatio，即设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

　　公式：window.devicePixelRatio = 物理像素 / dips

　　dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

　　例：<meta name="viewport" content="width=device-width">

　　所有非视网膜屏幕的iphone在垂直的时候，屏幕物理像素320像素，独立像素也是320像素，因此，window.devicePixelRatio等于1，在视网膜屏幕的iphone上，如iphone4s, 纵向显示的时候，屏幕物理像素640像素，独立像素还是320像素，因此，window.devicePixelRatio等于2。

　　（推荐blog：设备像素比devicePixelRatio简单介绍：http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/）

移动端rem，scale动态设置的更多相关文章

  1. 移动端使用rem时候动态设置html字体大小

      !(function(doc, win) { var docEle = doc.documentElement, evt = "onorientationchange" in ...

  2. 根据屏幕大小动态设置字体rem

    1.根据屏幕大小动态设置字体rem var docEl = document.documentElement, //当设备的方向变化(设备横向持或纵向持)此事件被触发.绑定此事件时, //注意现在当浏 ...

  3. js动态计算移动端rem适配问题

    第一:css3的media query来实现适配,例如下面这样: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...

  4. 第132天：移动web端-rem布局（进阶）

    rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...

  5. 第130天：移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

  6. 移动端rem适配屏幕

    九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...

  7. 动态设置html的font-size值

    PC端 (function () { function setRootFontSize() { let rem, rootWidth; let rootHtml = document.document ...

  8. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  9. 移动端适配：font-size设置的思考

    1. 问题的引出 如果html5要适应各种分辨率的移动设备,可以使用rem这样的尺寸单位,针对各个分辨率范围在html上设置font-size的代码: html{font-size:10px} @me ...

随机推荐

  1. jquery弹出层拖拽

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <met ...

  2. poj 3185 The Water Bowls 高斯消元枚举变元

    题目链接 给一行0 1 的数, 翻转一个就会使他以及它左右两边的都变, 求最少多少次可以变成全0. 模板题. #include <iostream> #include <vector ...

  3. mybatis+spring+c3p0+maven+ehcache

    项目截图 pom.xml如下 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...

  4. GraphLab:新的面向机器学习的并行框架

    大规模图数据计算引起了许多知名公司的关注,微软提出了用于图数据匹配的Horton - Querying Large Distributed Graphs(Link:http://research.mi ...

  5. Spring Boot Logback应用日志

    e Spring Boot Logback应用日志 2015-09-08 19:57 7673人阅读 评论(0) 收藏 举报 . 分类: Spring Boot(51) . 目录(?)[+] 日志对于 ...

  6. Trie三兄弟——标准Trie、压缩Trie、后缀Trie

    1.Trie导引 Trie树是一种基于树的数据结构,又称单词查找树.前缀树,字典树,是一种哈希树的变种.应用于字符串的统计与排序,经常被搜索引擎系统用于文本词频统计.用于存储字符串以便支持快速模式匹配 ...

  7. java实现冒泡排序，选择排序，插入排序，快速排序（简洁版）及性能测试

    1.冒泡排序是排序里面最简单的了,但性能也最差,数量小的时候还可以,数量一多,是非常慢的. 它的时间复杂度是O(n*n),空间复杂度是O(1) 代码如下,很好理解. public void bubbl ...

  8. CF 192 Div2

    A.Cakeminator 暴搞之,从没有草莓覆盖的行.列遍历 char map[30][30]; int vis[30][30]; int hang[30],lie[30]; int main() ...

  9. Ext JS学习第九天 Ext基础之 扩展原生的javascript对象

    此文来记录学习笔记: •Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务, 源码位置,我们可以从开发包的这个位 ...

  10. Visual Studio Tip: Get Public Key Token for a Strong Named Assembly

    The first 3 parts are easy to get. I should know the name, version, and culture for the assembly sin ...