Device Pixel Ratio & Media Queries
一些重要的名词解释:
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 | 默认浏览器 | 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 | 默认浏览器 | 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 | 默认浏览器 | 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的更多相关文章
- 移动端 解决自适应 和 多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible
其实H5适配的方案有很多种,网上有关于这方面的教程也非常的多. 不管哪种方法,都有其自己的优势和劣势. 为什么推荐使用Flexible库来做H5页面的终端设备适配呢? 原理 简单易懂 源码疑问 ...
- dpr——设备像素比(device pixel ratio)
设备像素比 = 物理像素 / 逻辑像素 1.物理像素 显示器上最小的物理显示单元(像素颗粒),在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值. 例如:手机大小固定,物理像素越高,画面越清晰 ...
- CSS3 Media Queries 片段
CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...
- [Canvas] Make Canvas Responsive to Pixel Ratio
Canvas is great for high performance graphics rendering but by default the results look blocky on ph ...
- 移动设备上的媒体查询 CSS media queries for mobile device
CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...
- css3的媒体查询(Media Queries)
我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...
- CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...
- CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- Media Queries 详解
Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel ...
随机推荐
- linux下expect使用教程
一.expect介绍 Expect是Unix系统中用来进行自动化控制和测试的软件工具,由DonLibes制作,作为Tcl脚本语言的一个扩展,应用在交互式软件中如telnet,ftp,Passwd,fs ...
- mysql数据库修改密码
更改MySQL用户密码 方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password(' ...
- phpcms V9实现QQ登陆OAuth2.0
phpcmsV9使用的QQ登陆依然是OAuth1.0,但现在腾讯已经不审核使用OAuth1.0的网站了.这对于使用pc的站长来讲是一个无比巨大的坑.经过对phpcms论坛的一位同学做的插件进行修改,现 ...
- Hadoop-chd4.4.0安装
Hadoop-cdh4下载地址: http://www.cloudera.com/content/cloudera-content/cloudera-docs/CDHTarballs/3.25.201 ...
- Yii 1.1 URL两个笔记 同时支持PATH于GET路由和隐藏index.php
同时支持PATH于GET格式路由(修改框架文件 简直坑) framework/web/CUrlManager.php parseUrl方法 第一行判断修改成 if($this->getUrlFo ...
- LightOJ 13361336 - Sigma Function (找规律 + 唯一分解定理)
http://lightoj.com/volume_showproblem.php?problem=1336 Sigma Function Time Limit:2000MS Memory L ...
- [iOS微博项目 - 3.4] - 获取用户信息
github: https://github.com/hellovoidworld/HVWWeibo A.获取用户信息 1.需求 获取用户信息并储存 把用户昵称显示在“首页”界面导航栏的标题上 ...
- 在ASP.NET MVC中验证checkbox 必须选中 (Validation of required checkbox in Asp.Net MVC)
转载自 http://blog.degree.no/2012/03/validation-of-required-checkbox-in-asp-net-mvc/ Why would you want ...
- 接口是干爹, 继承是亲爹 ---JAVA
接口(interface)是干爹, 因为你可以有很多很多的干爹爹... 继承(extends)是亲爹, 因为你只能有一个父类, 只有一个亲生的父亲. 单继承,多接口?./>./..
- Lotus 迁移到Exchange POC 之 新建2007 服务器!
我们登录到Exchange 2007 服务器,由于需要对AD进行扩展,我们首先必须完成架构扩展,由于默认没有ldifde工具,所以我们需要执行servermanagercmd –I rsat-adds ...