首先追溯到像素，第一个麻烦事像素的总量问题，同样的大小的屏幕像素可以差很远，像素大小更小的导致内容也变小
在小屏幕上如果展示巨大的桌面网页，诺基亚的做法是首先载入完整的桌面网页，然后缩放至设备屏幕大小（通过点击操纵杆放大缩小内容，左右移动位置，这里是通过虚拟的viewPort完成）
苹果在这基础上开发了新的viewport meta 标记，如果页面上没有标明，那么会使用默认的980像素大小渲染再缩小到手机屏幕大小，后来的手机浏览器都采用了苹果这方式
设为device-width是直接与设备的物理像素规模相关的，屏幕更小的设备需要更小的device-width才对，这样内容看起来会大一些，iPad mini的问题就是屏幕变小了，但是仍然使用的viewport是768像素的device-width（和大的iPad一样），因此看起来内容都缩小了
为什么苹果要这么做，没有降低device-width，是因为很多网页为了兼容平板，都采用1024*768像素布局，所以才维持了和大iPad一样的device-width。
设备像素和CSS像素有所不用
有一个128px的元素，当用户放大屏幕两倍，那么那么他的实际像素会放大（宽两倍，高两倍，实际面积放大四倍），浏览器会自动完成该操作
在浏览器中放大缩小，window.innerWidth也会跟着放大缩小，因为他是CSS像素，而screen.width不会，他代表屏幕设备像素
viewPort是用来约束<html>标签，例如有一个侧边栏宽度定义为10%，那么就是父元素<body>标签宽度的10%，body标签的宽度为100%<html>宽度（因为通常块元素默认宽度为父元素的100%），而<html>标签宽度是由viewPort决定的（也就是浏览器窗口的宽高），viewPort并没有HTML结构，因此不能用CSS去定义。
想要获得viewPort的尺寸（layout viewPort）就使用document.documentElement.clientwidth 来获取，注意区分window.innerwidth（visual viewPort），这是不带滚动条宽度的。
想要获得整个页面的尺寸就要使用document.documentElement.offsetWidth
对应的鼠标位置分三种：
pageX/Y 相对于整个页面坐标
clientX/Y 相对于viewPort的坐标
screenX/Y 相对于屏幕的坐标
media query 是根据layout viewPort来算的（也就是width属性，而不是device-width属性）
visual viewport和layout viewport。
把layout viewport想像成为一张不会变更大小或者形状的大图。现在想像你有一个小一些的框架，你通过它来看这张大图。（译者：可以理解为「管中窥豹」）这个小框架的周围被不透明的材料所环绕，这掩盖了你所有的视线，只留这张大图的一部分给你。你通过这个框架所能看到的大图的部分就是visual viewport。当你保持框架（缩小）来看整个图片的时候，你可以不用管大图，或者你可以靠近一些（放大）只看局部。你也可以改变框架的方向，但是大图（layout viewport）的大小和形状永远不会变。
<html>元素在初始情况下用的是layout viewport的宽度，并且你的CSS是在屏幕（译者注：宽度等于layout viewport的虚拟屏幕）好像明显比电话屏幕宽（物理屏幕）要宽的假设基础上进行解释的。这使得你站点布局的行为与其在桌面浏览器上的一样。
layout viewport有多宽？每个浏览器都不一样。Safari iPhone为980px，Opera为850px，Android WebKit为800px，最后IE为974px。
很显然两个viewport都是以CSS像素度量的。但是当进行缩放（如果你放大，屏幕上的CSS像素会变少）的时候，visual viewport的尺寸会发生变化，layout viewport的尺寸仍然跟之前的一样。
layout viewport宽度一直是一样的。如果你旋转你的手机，visual viewport会发生变化，但是浏览器通过轻微的放大来适配这个新的朝向，所以layout viewport又和visual viewport一样宽了。
<meta name="viewport" content="width=320">它的意思是调整layout viewport的大小为320像素。如果width=device-width时，这里有一个隐情。比如，Nexus One的正规宽度是480px，但是Google的工程师们觉得当使用device-width的时候，layout viewport的宽度为480px，这有些太大了。他们把宽度缩小为三分之二，所以device-width会返回给你一个320px的宽度，就像在iPhone上一样。因此devicePixelRatio值为480/320 = 1.5.
粗细不同问题：如果边框被设置为奇数（用 x 表示）：
* 对于左右边框，如果该元素与左边距离为偶数，则宽度显示为 1.5x+0.5；否则显示为 1.5x-0.5；
* 对于上下边框，如果该元素与上面距离为偶数，则宽度显示为 1.5x+0.5；否则显示为 1.5x-0.5；
* 要让容器左右或上下边框显示为一致的宽度，容器 width 或 height 必须是奇数；
例如，要显示 1px 的边框，设置元素的 border-width 为 1px 后，还要保证元素的 top、left、width、height 同时为奇数才可以
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
button {
border:none;
padding:0 16px;
box-shadow: inset 0 0 1px #000,
inset 0 1px 0 #75c2f8,
0 1px 1px -1px rgba(0, 0, 0, .5);
}
}
在Photoshop中，如果需要看似0.5px的边框，常见的方法就是对1px边框加上阴影模糊1px。同理，我们在retina屏下需要做到真实的1px边框，可利用box-shadow属性模拟。
@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5) {
button {
border:none;
padding:0 16px;
box-shadow: inset 0 0 1px #000,
inset 0 1px 0 #75c2f8,
0 1px 1px -1px rgba(0, 0, 0, .5);
}
}
PPK：
media query 查询设备分辨率的时候， device-pixel-ratio属性只有在使用WebKit的浏览器才支持，其他渲染引擎的需要使用resolution属性，而且WebKit的开始支持resolution，而其他的并不打算支持device-pixel-ratio属性，现在应该两个都用，将来可能只需要resolution
media query查询宽度的时候应该使用device-width属性，以前这个属性可能会匹配设备的物理像素或者ideal viewPort（就是width=“device-width”得到的那个值），所以人们不太愿意用，浏览器厂商统一width和device-width属性均匹配viewPort的CSS像素，因此鼓励使用device-width。
有些浏览器例如（Android上的），当工具栏显示或隐藏时，高度会跟着改变，在使用media query height的时候会有影响
除了layout viewPort 和 visual viewPort之外，还有一个ideal viewPort（就是width=“device-width”得到的那个），使用initial-scale=1.也会调用这个ideal viewPort。
initial-scale, minimum-scale, maximum-scale作用于ideal viewPort，例如iPhone 4s 竖屏的时候，把initial-scale=2 的话，visual viewPort变成160px（320/2），奇怪的是，layout viewPort也会变成160px，也就是说设置initial-scale 也会改变layout viewPort（与设置width一样），所以如果同时设置initial-scale和width的话：
<meta name="viewport" content="width=400,initial-scale=1"> （假设为iPhone 4s 320*480）
浏览器会使用较大的那个，也就是竖屏的时候layout viewPort width为400， 横屏的时候为480
meta viewport 相关值：
target-densitydpi
一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。
device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
<value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。
1 <!-- html document -->
2 <meta name="viewport" content="target-densitydpi=device-dpi" />
3 <meta name="viewport" content="target-densitydpi=high-dpi" />
4 <meta name="viewport" content="target-densitydpi=medium-dpi" />
5 <meta name="viewport" content="target-densitydpi=low-dpi" />
6 <meta name="viewport" content="target-densitydpi=200" />
为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。
initial-scale
初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。
maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。
user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。所有的缩放值都必须在0.01–10的范围之内。
例：
<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"/>
.png)
- 响应式设计：理解设备像素，CSS像素和屏幕分辨率
概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的 ...
- 【Android 应用开发】Android屏幕适配解析 - 详解像素,设备独立像素,归一化密度,精确密度及各种资源对应的尺寸密度分辨率适配问题
. 作者 :万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/19698511 . 最近遇到了一系列的屏幕适配问题, 以及 ...
- Android屏幕适配解析 - 详解像素,设备独立像素,归一化密度,精确密度及各种资源对应的尺寸密度分辨率适配问题
. 作者 :万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/19698511 . 最近遇到了一系列的屏幕适配问题, 以及 ...
- 响应式布局—设备像素密度测试 (-webkit-min-device-pixel-ratio)
最近遇到这种头疼的问题,百思不得其解,不耻下问,悬梁刺股这些事情都做过之后,终于看到希望,于是攒见好就收,感觉整理分享给大家,希望有所帮助. 对手机分辨率和网页像素的初步认识是,是2倍的差别. 但 ...
- 设备像素比devicePixelRatio简单介绍
本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持,随着显示器的发展,这个属性也慢慢登上了前端技术的舞台. ...
- CSS布局基础之一设备像素，设备独立像素，设备像素比，css像素之间的关系
设备像素dp(device pixels) ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目,数值越高,代表屏幕能以更高的密度显示图像. 计算公式:ppi=像素数量/物 ...
- 设备像素，设备独立像素，CSS像素
之前学了移动端的开发对设备像素.设备独立像素.CSS像素弄得不太清楚,所以趁周末的时间查了一下,稍加整理 一些概念 在进行具体的分析之前,首先得知道下面这些关键性基本概念. CSS像素 CSS像素是W ...
- 设备像素比dpr介绍
首先介绍一下概念 devicePixelRatio其实指的是window.devicePixelRatio window.devicePixelRatio是设备上物理像素和设备独立像素(device- ...
- CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
1.PX(CSS pixels) 1.1 定义 虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. 1.2 注意 在CS ...
随机推荐
- .h（头文件） .lib（库文件） .dll（动态链接库文件） 之间的关系和作用的区分
.h头文件是编译时必须的,lib是链接时需要的,dll是运行时需要的.附加依赖项的是.lib不是.dll,若生成了DLL,则肯定也生成 LIB文件.如果要完成源代码的编译和链接,有头文件和lib就够了 ...
- JSP入门3 Servlet
需要继承类HttpServlet 服务器在获得请求的时候会先根据jsp页面生成一个java文件,然后使用jdk的编译器将此文件编译,最后运行得到的class文件处理用户的请求返回响应.如果再有请求访问 ...
- 【重点突破】——Canvas技术绘制随机改变的验证码
一.引言 本文主要是我在学习Canvas技术绘图时的一个小练习,绘制随机改变的验证码图片,虽然真正的项目里不这么做,但这个练习是一个掌握Canvas技术很好的综合练习.(真正的项目中验证码图片使用服务 ...
- hdu3507 Print Article(斜率DP优化)
Zero has an old printer that doesn't work well sometimes. As it is antique, he still like to use it ...
- libsvn_subr-1.so.0: undefined symbol: apr_atomic_xchgptr 故障解决
源码编译安装完成之后,查看svn的安装版本会报以下错误 svn: symbol lookup error: /usr/local/subversion/lib/libsvn_subr-.so.: un ...
- ubuntu远程桌面介绍
一.windows远程ubuntu14.04 由于xrdp.gnome和unity之间的兼容性问题,在Ubuntu 14.04版本中仍然无法使用xrdp登陆gnome或unity的远程桌面,现象是登录 ...
- hiveQL求差集
hive sql求差集的方法 1.什么是差集 set1 - set2,即去掉set1中存在于set2中的数据. 2.hive中计算差集的方法,基本是使用左外链接. 直接上代码 select * fro ...
- 51nod 1510 最小化序列 | DP 贪心
题目描述 现在有一个长度为n的数组A,另外还有一个整数k.数组下标从1开始. 现在你需要把数组的顺序重新排列一下使得下面这个的式子的值尽可能小. ∑|A[i]−A[i+k]| 特别的,你也可以不对数组 ...
- 用FastDFS一步步搭建文件管理系统
一.FastDFS介绍 FastDFS开源地址:https://github.com/happyfish100 参考:分布式文件系统FastDFS设计原理 参考:FastDFS分布式文件系统 个人封装 ...
- jsp与servlet联合处理
通过model1 或者说 model2 我们知道的mvc 的分层思想, 在model1 中jsp 通负责显示,有负责控制逻辑结构, 那么怎么做呢,看下面的请求过程. <?xml version= ...
.JPG)