针对高分辨率屏幕的样式优化
- - 前端观察苹果定义高分屏(retina)已经好久了,只是最近才有越来越多的网站开始重视高分屏下的表现,QQ空间也早支持高分屏了,CSS Gaga也加入了对@2x图片的支持. 嗯,迟到的文章,和大家简单的分享下. 首先,关于高分屏的基础知识,可以查看之前的文章《 移动端webapp开发必备知识》. 一般来说,内容类的资源并不需要对高分屏做什么优化,需要优化的是固定的图片类资源.
苹果定义高分屏(retina)已经好久了,只是最近才有越来越多的网站开始重视高分屏下的表现,QQ空间也早支持高分屏了,CSS Gaga也加入了对@2x图片的支持。嗯,迟到的文章,和大家简单的分享下。
首先,关于高分屏的基础知识,可以查看之前的文章《 移动端webapp开发必备知识》
一般来说,内容类的资源并不需要对高分屏做什么优化,需要优化的是固定的图片类资源。而且通常现在有三种做法:
这是最简单的方法:
1 2 3 | @media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) { /* style rules */ } |
兼容所有浏览器的话(当然不考虑IE9以下浏览器了),还需要加上各浏览器的前缀:
1 2 3 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and ( min--moz-device-pixel-ratio: 1.5), only screen and ( -o-min-device-pixel-ratio: 3/2), only screen and ( min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) { /* Style Rules */ } |
我们可以通过 window.devicePixelRatio
方法来获取当前屏幕的像素比然后给body或者html标签添加差异化的class,再在样式中针对高分屏用2x的图片就好了:
1 2 3 4 | var dpr = window.devicePixelRatio; if (dpr >=1.5){ $('html').addClass("is-ratina"); } |
不过既然媒体查询可以做到的事情,就不要用js去reflow页面了。
当然,如果 配合CSSgaga的 AutoRetina功能,工作量会减少很多。