针对高分辨率屏幕的样式优化

标签: CSS Tips 响应式 媒体查询 高分屏 | 发表时间:2013-07-22 22:21 | 作者:神飞
出处:http://www.qianduan.net

苹果定义高分屏(retina)已经好久了,只是最近才有越来越多的网站开始重视高分屏下的表现,QQ空间也早支持高分屏了,CSS Gaga也加入了对@2x图片的支持。嗯,迟到的文章,和大家简单的分享下。

首先,关于高分屏的基础知识,可以查看之前的文章《 移动端webapp开发必备知识

一般来说,内容类的资源并不需要对高分屏做什么优化,需要优化的是固定的图片类资源。而且通常现在有三种做法:

  • 自定义字体,将扁平化的图标做成字体,可以原生的支持高分屏,因为字体是矢量的。比如 前端界用的icon-font,所以在iPhone和rMBP上看起来图标都不会模糊;缺点是有些手机端浏览器不支持,比如“用户量最大的UC浏览器”
  • 矢量图片,嗯,将图标做成SVG格式,也能很完美的兼容到主流手机系统,当然Android 2.3以下版本支持很不好。
  • 2倍图片,嗯,兼容性最好的方案,本文主要说这种方法。

使用媒体查询

这是最简单的方法:

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 */ 
}

JS判断

我们可以通过 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功能,工作量会减少很多。

 

相关 [分辨率 屏幕 优化] 推荐:

针对高分辨率屏幕的样式优化

- - 前端观察
苹果定义高分屏(retina)已经好久了,只是最近才有越来越多的网站开始重视高分屏下的表现,QQ空间也早支持高分屏了,CSS Gaga也加入了对@2x图片的支持. 嗯,迟到的文章,和大家简单的分享下. 首先,关于高分屏的基础知识,可以查看之前的文章《 移动端webapp开发必备知识》. 一般来说,内容类的资源并不需要对高分屏做什么优化,需要优化的是固定的图片类资源.

IDF:Ultrabook屏幕分辨率可达2560x1440

- xing - cnBeta.COM
刚刚过去的IDF 2011旧金山大会上,Intel拿出来展示的Ultrabook样品很多,多数都是13英寸分辨率1366*768的型号,对于高价并且预期使用年限比较长的Ultrabook来说实在不够劲. 不过这一情况将在来年得到改变,根据新加坡VR-Zone拿到的消息,2012年当采用Ivy Bridge处理器的Ultrabook发布后,13.3英寸版Ultrabook的分辨率将达到2560*1440,并且屏幕厚度将只有3mm,超越传说中iPad 3的2048*1536.

日立宣布开发出4.5寸高分辨率裸眼3D屏幕

- wangxy - cnBeta.COM
日立旗下显示部门20日宣布,已开发出使用液晶透镜方式的4.5英寸IPS裸眼3D液晶面板,分辨率可达1280*720. 此次开发的液晶屏使用液晶透镜技术,在IPS液晶面板上加入聚光功能,使得通过液晶透镜的光重叠产生3D观看效果. 新的液晶透镜比起原本的柱状透镜技术来说,用户可自由调整观看距离和切换2D/3D显示,且分辨率问题得到了解决.

Toshiba 展示六寸平板屏幕,分辨率有 498ppi 那么高

- 我心飞翔 - Engadget 中国版
今年稍早 Toshiba 展示了一个 4 吋、367ppi 高分辨率的手机屏幕. 现在他们更加码,推出更高画素密度的 6.1 吋平板(也可能是手机,这年头啊...)屏幕. Toshiba 说这个分辨率高达 498ppi (2,560 x 1,600)的屏幕能够呈现「超越相片」的画面. 其它规格部分:1000:1 高对比度、1,670 万色、NTSC 标准虚拟色域达 61%、水平垂直各 176 度的可视角.

网络加载到的图片适配不同分辨率的手机屏幕

- - 移动开发 - ITeye博客
对于从网络上加载到的图片信息,在解析的时候一般会解析成图片的原始大小,也就是实际的像素值. 但是往往会出现如下情况:大屏幕图片可能过小,小屏幕图片可能过大,因此需要对屏幕内容按照屏幕的实际密度进行拉伸,处理方式如下:.  其中:options.inTargetDensity对应目标尺寸,inDensity对应的是原始图片理论上应该适配的屏幕尺寸.

JS获取当前对象大小以及屏幕分辨率等

- - JavaScript - Web前端 - ITeye博客
JS获取当前对象大小以及屏幕分辨率等. s += " 网页可见区域宽:"+ document.body.clientWidth+"\n";. s += " 网页可见区域高:"+ document.body.clientHeight+"\n";. s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"\n";.

百度统计发布最新中国网民电脑屏幕分辨率的分布信息

- 车东 - 百度统计官方博客
Shared by 车东. 这个其他是 > 1024 还是 < 1024呢.       国内领先的网站统计分析工具百度统计(tongji.baidu.com)日前公布了截止5月15日中国网民电脑屏幕设置的分辨率统计情况. 来自百度统计的数据表明:中国网民电脑屏幕设置的分辨率主要有1024x768 、1440x900 、1366x768、1280x800 .

Sony Xperia Tablet Z 正式发布,1.5GHz 四核处理器、1,920 x 1,200 屏幕分辨率、6.9mm 厚!

- - Engadget 中国版
Sony 在 CES 2013 上更新了自家的 Xperia 手机产品线后,现在则是轮到自家主打防尘、防泼水的新款平板电脑的新一代产品了. 今天该公司在官网上宣布 Sony Xperia Tablet S 后继机的推出消息. 新一代的 Xperia Tablet Z 其屏幕尺寸保持在 10.1 吋的大小(采用 Mobile Bravia Engine 2 影像技术),分辨率方面则是向上推升至 WUXGA 的境界 -- 嗯.

1366&#215;768超过1024&#215;768成最流行的屏幕分辨率,你的产品用户体验中有考虑到吗?

- - 36氪
来自独立网络分析公司 StatCounter的最新统计数据显示,从2012年3月开始,1366×768已经成为世界范围内最受欢迎的屏幕分辨率. 在此之前的三年里一直都是1024×768这一尺寸,因此可将其视为一种标志性的改变. StatCounter表示这些数据基于每月对全球三百多个网站,超过150亿个页面的统计.