一些重要的名词解释：

CSS pixels（CSS 像素）：详见http://www.w3.org/TR/css3-values/#reference-pixe

CSS声明的像素值，可随着放大缩小而放大缩小。

Device pixels（设备 像素）：

Layout viewport（布局视口）设计像素值固定，对web开发者来说基本没有用。

HTML元素初始视口区域，css中声明宽度的20%等都是按照这个视口来计算。

Visual viewport （设备视口）

屏幕视口，通过这个视口能看到页面布局。

关于移动设备：

有两个视口，Visual Viewport和Layout Viewport。Visual Viewport是页面在屏幕上显示的一部分，用户可以通过滚动来改变能看到的页面的部分，或者通过缩放来改变visual viewport的大小。Layout Viewport，可以比Visual Viewport宽，css中声明的百分比都按照Layout Viewport的宽高来计算。默认的Layout Viewport在各个浏览器上显示宽度略有不同，Safari iPhone 980px、Opera 850px、Android Webkit 800px、IE 974px。可见在初始化时的Layout Viewport宽度普片宽于Visual Viewport。有些浏览器有一些特别行为：

Browser Behaviour
Symbian Webkit Layout viewport和Visual Viewport保持一致，因此Layout Viewport最宽不能超过850px
Samsung Webkit(bada) Layout Viewport和最宽的元素保持一致
BlackBerry Layout Viewport和Visual Viewport 100%放大时一样。

缩放（zooming）：

Layout Viewport和Visual Viewport都以CSS的像素来衡量，但当放大时（zoom  in）屏幕中只能展现更少的CSS 像素值，但是layout viewport本身维度保持不变。

理解 layout viewport：

完全缩小模式：很多浏览器在页面初始的时候使用的是完全缩小模式（fully zoomed-out mode），就是说浏览器已经选择了layout viewport的尺寸去完全覆盖整个屏幕，等于visual viewport 。

因此在完全缩小模式下，layout viewport的宽度和高度和屏幕显示的相同，当用户放大时尺寸保持不变。Layout viewport 宽度总是保持不变的，如果旋转手机屏幕，visual viewport改变，但是浏览器为了适应旋转会稍微放大以保证layout viewport和visual viewport宽度一致。

但这也导致了一个问题：横屏模式下 layout viewport的高度远远屏幕高度，当然 大多时候we don’t  care height.

测量 viewport：

有两个viewport需要测量-Layout Viewport 和 Visual Viewport。

Layout viewport 测量：document..documentElement.clientWidth (document.documentElement.clientHeight)

Visual viewport 测量：window.innerWidth(window.innerHeight) 显然，放大缩小时这个尺寸会变，更多或者更少的css 像素值在屏幕中显示，但这两个属性会有浏览器兼容性问题。

屏幕：screen.width(screen.height)

缩放等级：

可通过window.innerWdith除以screen.width来判断，前提你的浏览器得对这两个属性进行很好的支持╮(╯▽╰)╭，幸运的是~缩放等级不怎么重要。

Offset：

有时我们需要知道当前visual viewport相对于layout viewport的位置，即scrolling offset。

测量：window.pageXOffset(window.pageYOffset)

<html>元素：

测量：document.documentElement.offsetWidth(document.documentElement.offsetHeight)

Media Queries:

width（height）用于layout viewport，通过CSS像素值来衡量;device-width(device-height)用于设备屏幕，通过设备像素物理值来衡量。换句话说，

width（height）衡量的是document.documentElement.clienWidth(document.documentElement.clientHeight)

device-width(device-height)衡量的是screen.width(screen.height)

可以看出CSS Media Queries 在区分终端是desktop、tablet和mobile上还是很有用的，但不是不能区分使用mobile或者tablet的种类呦~。

事件坐标 ：移动端各种不兼容哇。。。

pageX（pageY）；clientX(clientY):相对于visual viewport而言；screenX(screenY):相对于设备屏幕以device pixels做衡量，米有什么用。

Meta Viewport：

大家应该都很熟悉，这个其实就是调整layout viewport用滴~。因此，<meta name=”viewport”content=”width=320”>就是设置了layout viewport等于320px。但是，有时候screen.width并不准确，因为像素数过高，比如，Nexus的宽度480px但是Google觉得用device-width的时候480px太多了~于是。。。shrink2/3了。。device-width代表的尺寸缩减到了320px就跟iphone一样。

DPI(dots-per-inch)

设备 屏幕尺寸 屏幕分辨率 DPI
HTC Pyramid 4.3” 960*540px 256
Samsung Galaxy S2 4.37” 800*480px 218
iPhone 4 3.5” 960*640px 326
iPad 2 9.7” 1024*768px 132
XOOM 10.1” 1280*800px 160

总的来说，屏幕分辨率越高，DPI的值其实是越低的（iPad3是例外）。正因为如此，一般情况下文本和图片缩放太小不能看清楚。举个例子：在96DPI的设备上16px文本显示高度约为2.6/16英寸高，但在256DPI上就是1/16英寸高。因此手机浏览器会放大整个页面，由此引发了图片被发达导致不清晰的情况。

解决方案：

  • SVG Method：

SVG可以在Safari和Opera上用作背景图或者图片，但不幸的是，Android 3.0以下不支持，WP7的IE7版本不支持。

  • Double-size image method：

使用高分辨率图片去匹配高分辨率设备，然后进行图片缩放。大多数高DPI手机默认放大比数在1.5至1.6之间，所以把图片尺寸双倍后再双倍缩小图片就已经足够保证清晰了。例如：一张宽度32px的图片，你需要存成一张宽度64px的图片然后在页面中把其宽度设成32px。唯一不足的是在低DPI的设备上不能满足，只能借助脚本或者Media Queries.

有关背景图片：

使用CSS3中的background-size 属性，进行背景图片的缩放。但是，Opera Mini和IE(注：wp7 IE9可以支持此属性)。例：

.example {

background: url(‘example.png’) no-repeat top left;

background-size: 32px 32px;

-webkit-background-size: 32px 32px;

}

@Media Queries：

使用Media Queries不仅可以根据H-DPI和L-DPI选择对应的样式， 也可以根据前缀（-webkit和-o）的不同来判断浏览器内核。不过，你得多定义几次。。。例如：

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {…}

@media screen and (-o-min-device-pixel-ratio: 3/2) {…}

不过你有可能喜欢把不同的样式拆分开加载，因此可以写成：

<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 480px)” href=”style.css” />

或者::

@import url(“style2.css”) screen and (orientation:landscape);   /*放在css文件开始，此方法非并行加载*/

总结如下：

  Android 3.0- 默认浏览器 Safari OperaMobile Opera Mini Firefox WP7 IE9
SVG No Yes Yes/Blurry Yes Yes Yes
Background-Size Yes Yes Yes(显示不完整) No Yes Yes

关于Android多分辨率

一些Android支持的尺寸概念：

  • Screen Size：实际物理尺寸
  • Screen density：屏幕的物理面积内的像素数量，通常指dpi（dots-per-inch）
  • Resolution：屏幕上物理像素总数。
  • Density-independent pixel(dp):一个密度无关的像素，相当于，160dpi屏幕下1个物理像素值。Dp与屏幕像素间转换：

px = dp * (dpi / 160).例，240dpi屏幕上 1dp相当于1.5物理像素值。

总结

  • 解决各个分辨率下图片清晰度问题：1）SVG  2）Double-size image +Media Queries
  • 关于Media Queries：css的Media Queries不仅能写在css文件里面，也可以使用link或者@import的形式进行并行载入，根据判断条件的不同并行或串行加载不同的css，详情请见附录二。wp7、Android、ios等大三平台对Media Queries的支持都是良好的，只是有个别的判断条件上支持不一样，详情请见附录三。

REF

Dp/Px 转换器：http://labs.skinkers.com/content/android_dp_px_calculator/

@import样式和link样式的区别：

  • 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。
  • 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

因此，个人建议@import只用于附加样式，主体样式依旧使用link形式，且如非必要不要用@import。

Media Queries Supports E.X.

/* Smartphones (portrait and landscape) ———– */

@media only screen and (min-width : 320px) and (max-width : 480px) {/* Styles */}

Support 默认浏览器 QQ UC Opera
Android 2.2 Yes Yes Yes Yes
IOS 5.1 Yes Yes Yes Not tested
WP7 Yes Yes Yes Not tested

@media only screen and (orientation:landscape) {/* Styles */}

Support 默认浏览器 QQ UC Opera
Android 2.2 Yes Yes Yes Yes
IOS 5.1 Yes Yes Yes Not tested
WP7 Yes No 但是支持（portrait） Yes Not tested

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (-o-device-pixel-ratio : 1.5) ,only screen and (min-device-pixel-ratio : 1.5) {/* Styles */}

Support 默认浏览器 QQ UC Opera
Android 2.2 Yes Yes Yes Yes
IOS 5.1 Yes Yes Yes Not tested
WP7 No No No Not tested

API：

media_query_list: <media_query> [, <media_query> ]*

media_query: [[only | not]? <media_type> [ and <expression> ]*]

| <expression> [ and <expression> ]*

expression: ( <media_feature> [: <value>]? )

media_type: all | aural | braille | handheld | print |

projection | screen | tty | tv | embossed

media_feature: width | min-width | max-width

| height | min-height | max-height

| device-width | min-device-width | max-device-width

| device-height | min-device-height | max-device-height

| aspect-ratio | min-aspect-ratio | max-aspect-ratio

| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio

| color | min-color | max-color

| color-index | min-color-index | max-color-index

| monochrome | min-monochrome | max-monochrome

| resolution | min-resolution | max-resolution

| scan | grid

Device Pixel Ratio & Media Queries的更多相关文章

  1. 移动端 解决自适应 和 多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible

    其实H5适配的方案有很多种,网上有关于这方面的教程也非常的多. 不管哪种方法,都有其自己的优势和劣势. 为什么推荐使用Flexible库来做H5页面的终端设备适配呢?   原理  简单易懂  源码疑问 ...

  2. dpr——设备像素比（device pixel ratio）

    设备像素比 = 物理像素 / 逻辑像素 1.物理像素 显示器上最小的物理显示单元(像素颗粒),在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值. 例如:手机大小固定,物理像素越高,画面越清晰 ...

  3. CSS3 Media Queries 片段

    CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...

  4. [Canvas] Make Canvas Responsive to Pixel Ratio

    Canvas is great for high performance graphics rendering but by default the results look blocky on ph ...

  5. 移动设备上的媒体查询 CSS media queries for mobile device

    CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...

  6. css3的媒体查询(Media Queries)

    我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...

  7. CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全

    媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...

  8. CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  9. Media Queries 详解

    Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码:  <link href="css/reset.css" rel ...

随机推荐

  1. Android Capture Android System Audio

    项目需要获取播放视频的实时音量值,最简捷的方法是监听音频输出端,取得音频输出流,再进行转换. 调查时,首先找到这篇博客: http://blog.csdn.net/jinzhuojun/article ...

  2. 组建你自己的Theme,组件你的Style

    Andorid-Style,组建你自己的Theme,组件你的Style 前言: 今天,尝试了一个新的Demo,也尝试深入学习,话不多说,看一下,这个Demo如何实现的自定义主题与组件Style是如何绑 ...

  3. algorithm@ Sieve of Eratosthenes (素数筛选算法) & Related Problem (Return two prime numbers )

    Sieve of Eratosthenes (素数筛选算法) Given a number n, print all primes smaller than or equal to n. It is ...

  4. 一些推荐的spark/hadoop课程

    为了分享给你们,也为自己. 感谢下面的老师们! 1.王家林DT大数据梦工厂的大数据IMF传奇行动课程 总的目录是: 第一阶段:Linux和Java零基础企业级实战 第二阶段:Hadoop和Hive零基 ...

  5. c#通过操作mongodb gridfs实现文件的数据库存储

    @(编程) 源码 using MongoDB.Driver; using MongoDB.Driver.GridFS; using System.IO; namespace Wisdombud.Mon ...

  6. 《Pandoc用户指南》之一

    @(编程) 1. 描述 Pandoc是一个用于从一种标记格式转换为另一种的Haskell库,还是一个使用该库的命令行工具.它可以读取markdown格式和Textile格式(的子集).reStruct ...

  7. keil编译时出现*** WARNING L2: REFERENCE MADE TO UNRESOLVED EXTERNAL

    *** WARNING L2: REFERENCE MADE TO UNRESOLVED EXTERNAL *** WARNING L1: UNRESOLVED EXTERNAL SYMBOL 解决： ...

  8. 题目连接：http://acm.zznu.edu.cn/problem.php?id=1329

    题目大意: 定理:把一个至少两位的正整数的个位数字去掉,再从余下的数中减去个位数的5倍.当且仅当差是17的倍数时,原数也是17的倍数 . 例如,34是17的倍数,因为3-20=-17是17的倍数:20 ...

  9. 修改hosts文件解决OneDrive被墙的问题

    增加如下内容就可以了.如果不知道修改hosts文件的具体方法请自行百度. 134.170.108.26 onedrive.live.com 134.170.108.152 skyapi.onedriv ...

  10. iOS开发中的测试框架

    转载作者:@crespoxiao 我们为什么要用测试框架呢?当然对项目开发有帮助了,但是业内现状是经常赶进度,所以TDD还是算了吧,BDD就测测数据存取和重要环节,这很重要,一次性跑完测试单元检查接口 ...