http://www.189works.com/article-95647-1.html

说起iPhone 4带来的革新,retina display绝对是最吸引眼球的一项,以至于我现在看电脑的显示屏时,都能看到满屏幕的像素点了⋯

正是依赖这视网膜显示屏,iPhone 4的分辨率达到了640×960 pixels;不过为了保持向下兼容性,它采用的仍然是320×480 points。

也就是说,在不进行缩放的情况下,显示普通图片时,它会用4个像素来显示图片中的1个像素;而在显示retina图片时,每个像素都对应图片中的1个像素。

如此一来,老的应用无需修改就可以在iPhone 4上运行了——虽然显示效果差了点,但是不会出现只有左上角那1/4的区域有内容的情况。

在用iOS SDK开发iOS应用时,只要将图片名加上“@2x”后缀,就能让支持retina display的设备自动显示这个解析度更高的图片。

但Safari等使用UIWebView的应用在展示图片时,却无法利用这个特性,因为这样可能会造成大量没必要的HTTP请求。

既然不能自动实现,那就只能手动来弄了。原理很简单,准备2种图片,当检测到支持retina display时,就显示大图,然后把图像的长宽各缩小一半即可。

在网页中,pixel与point比值称为device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5。

要检测它,直接用CSS3 media query即可:

  1. <link rel="stylesheet" type="text/css"
  2. href="/css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)"/>

或者:

  1. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {}

这种方式的缺点是图片必须设为背景图片,或者同时列出2个img元素,但隐藏其中一个。详细的代码我就不列出来了.

更灵活的方法当然就是用JavaScript了。只要简单地获取window.devicePixelRatio即可,对老的浏览器而言它是undefined,将其当成1就行了。

以这个地球仪来举例:

  1. <img src="/data/attachment/portal/et2/201209/ET40121130659322.png" id="photo"/>

它的长宽都是64像素,所以我应该获取一个128像素的,然后缩小一半:

  1. if (window.devicePixelRatio == 2) {
  2. var photo = document.getElementById('photo');
  3. photo.src = '/data/attachment/portal/et2/201209/ET40121130659323.png';
  4. photophoto.width = photo.height = 64; // 这个图片没有指定宽高,因此其实修改其中一个就行了
  5. }

这种方法的缺点就是可能会浪费流量,因为在JavaScript执行之前,就已经在获取低解析度的图片了。

最终的效果如下:

虽然在电脑上完全看不出有什么区别,但用iPhone 4在手机页面浏览或放大时可以很容易看出2者的差异。

前言:

  1. 本文来自于对 http://bjango.com/articles/min-device-pixel-ratio/ 的部分整理:

正文:

  1. -webkit-min-device-pixel-ratio1.0
  2. 所有非RetinaMac
  3. 所有非RetinaiOS设备
  4. Acer Iconia A500
  5. Samsung Galaxy Tab 10.1
  6. Samsung Galaxy S
  7. -webkit-min-device-pixel-ratio1.3
  8. Google Nexus 7
  9. -webkit-min-device-pixel-ratio1.5
  10. Google Nexus S
  11. Samsung Galaxy S II
  12. HTC Desire
  13. HTC Desire HD
  14. HTC Incredible S
  15. HTC Velocity
  16. HTC Sensation
  17. -webkit-min-device-pixel-ratio2.0
  18. iPhone 4
  19. iPhone 4S
  20. iPhone 5
  21. iPad (3rd generation)
  22. iPad 4
  23. 所有Retina displays MAC
  24. Google Galaxy Nexus
  25. Google Nexus 4
  26. Google Nexus 10
  27. Samsung Galaxy S III
  28. Samsung Galaxy Note II
  29. Sony Xperia S
  30. HTC One X

如何判断retina,如何判断设备的比例的更多相关文章

  1. JS判断是否是移动设备进行http链接重定向

    1.问题: 用户使用手机移动设备访问127.0.0.1/yemian,自动识别到手机端并且跳转至127.0.0.1/m/yemian 2.小二,上代码: //判断是否是移动设备 var ua = na ...

  2. H5与安卓、IOS的交互,判断微信、移动设备、安卓、ios

    一.通过用户代理可以判断网页当前所在的环境 var browser={ versions:function(){ var u = navigator.userAgent, app = navigato ...

  3. [改善Java代码]用偶判断,不用奇判断

    建议21: 用偶判断,不用奇判断 public class Client { public static void main(String[] args) { Scanner in = new Sca ...

  4. 判断DataTale中判断某个字段中包含某个数据

    // <summary> /// 判断DataTale中判断某个字段中包含某个数据 /// </summary> /// <param name="dt&quo ...

  5. 判断逻辑 先判断协议字段返回,再判断业务返回,最后判断交易状态 API密钥

    [微信支付]微信小程序支付开发者文档 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=4_1 协议规则 商户接入微信支付, ...

  6. JQ实现判断iPhone、Android设备

    最近做了一版微信宣传页,通过JQ来判断设备,并进行下载 微信内置浏览器对下载链接进行了屏蔽,所以先进行判断,如果是微信内置浏览器,则跳转应用宝链接,如果不是,则判断是iPhone/Adroid/PC ...

  7. js判断用户的浏览器设备是移动端还是pc端

    最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...

  8. [开发笔记]-js判断用户的浏览设备是移动设备还是PC

    最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...

  9. Android判断当前的android设备是否处于联网状态

    首先,要想获得当前android设备是否处于联网状态,那么android本身给我们提供了一个服务 private ConnectivityManager connectivityManager;//用 ...

随机推荐

  1. Jenkins参数化构建插件,实现构建前输入自定义参数

    插件: [Build with Parameters]:https://wiki.jenkins-ci.org/display/JENKINS/Build+With+Parameters+Plugin ...

  2. 验证时出错。HRESULT = '8000000A'

    往往出现在 做了安装项目后有警告: 解决办法: 这本来是在VS2005下创建的一下项目,后来改用VS2010的开发环境,.NET Framework的版本还是使用2.0, 但每次生成之后都会在解决方案 ...

  3. MYSQLDUMP参数详解

    mysqldump客户端可用来转储数据库或搜集数据库进行备份或将数据转移到另一个SQL服务器(不一定是一个MySQL服务器).转储包含创建表和/或装载表的SQL语句. 如果你在服务器上进行备份,并且表 ...

  4. CentOS找回root密码

    如果忘记了root密码,可以进入单用户模式进行密码重置. 重启系统,在grub的启动菜单中按下e键,然后编辑kernel那一行,在最后的quiet后加上single. 按下Enter后,再按b开机进入 ...

  5. Git分支学习简记

    简介 开始过了两遍Git的内容,第二天就已经忘记了分支(branch)的概念,开始还觉得不太用的到.然后又看了第二遍,才发现为什么大家说这个是Git里边极其重要的一个东西. 所谓branch,就类似于 ...

  6. 感受身边app

    第一款:高考小秘书.http://www.liqucn.com/rj/519571.shtml.下载链接.我认为产品最大的优势在于对高考生非常有利,实用价值大,对于每年的高考生来说,高考资讯和大学资讯 ...

  7. Ubuntu学习总结-08 Ubuntu运行Shell脚本报 shell /bin/bash^M: bad interpreter错误问题解决

    错误原因之一很有可能是运行的脚本文件是DOS格式的, 即每一行的行尾以\r\n来标识, 其ASCII码分别是0x0D, 0x0A.可以有很多种办法看这个文件是DOS格式的还是UNIX格式的, 还是MA ...

  8. BZOJ3685: 普通van Emde Boas树

    显然这题的所有操作都可以用set,但是直接用set肯定要T,考虑到读入量较大,使用fread读入优化,就可以卡过去了. #include<bits/stdc++.h> using name ...

  9. centos 创建以日期为名的文件夹

    [root@desk task]# mkdir $(date +%Y)$(date +%m)$(date +%d) [root@desk task]# mkdir `date +%Y``date +% ...

  10. smith waterman算法

    http://www.360doc.com/content/14/0106/00/14641369_342933143.shtml