Retina 直接翻译是视网膜的意思。
在IT上,是Apple 公司提出的。
意思是指一个显示屏的颗粒度 px 密度高到人类无法看见。
要了解细节必须先了解基础知识
inch 英寸 1 inch = 2.52 cm
手机的inch 以屏幕的斜线(左上角到右下角的长度)来计算
ppi = pixel per inch 就是1 inch 里面有多少个像素,也可以当成密度来看待 。
所以 ppi 越高越好.
Retina屏幕对web的影响
在Retina屏幕下照片会base on 设备的 window.devicePixelRatio 而变大。
比如一张 300px 的相片 , 在一架 devicePixelRatio =2 的手机上 
会是 600px 的!照片会被放大1倍也就懵掉了!
所以为了迎合 Retina 手机,我们必须具备 600px的照片和一张 300px的照片.
通过游览器 img 标签的属性 srcset="123_big.jpg 2x" 
来自动判断显示哪一张图像。

Retina 显示屏的更多相关文章

  1. 让你的应用支持新iPad的Retina显示屏

    一.应用图片标准iOS控件里的图片资源,苹果已经做了相应的升级,我们需要操心的是应用自己的图片资源.就像当初为了支持iPhone 4而制作的@2x高分辨率版本(译者:以下简称高分)图片一样,我们要为i ...

  2. Retina显示屏-揭秘移动端的视觉稿通常会设计为传统PC的2倍

    一.Retina显示屏简介 retina:一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina显示屏中,像素点1个变为4个. reti ...

  3. RETINA显示屏下ICON优化方法

    便于理解,先来了解几个名词: dpi(dots per inch),每英寸的点数,用来测量任何设备的硬件分辨率.一个21”的屏幕可以拥有1680 X 1050 的分辨率,27”的屏幕也可以拥有相同的分 ...

  4. Retina时代的前端视觉优化

    随着New iPad的发布,平板也将逐渐进入Retina时代,在高分辨率设备里图片的显示效果通常不尽人意,为了达到最佳的显示效果就需要对图片进行优化,这里介绍一些优化方法: 一.用CSS替代图片 这一 ...

  5. IOS 特定于设备的开发:监测Retina支持

    近年来,Apple在其旗舰设备上引入了Retina显示屏.根据Apple的说法,他的像素密度非常高,足以使人眼无法区分单独的像素. UIScreen类提供了一种容易的方式,用于监查当前设备是否提供了内 ...

  6. 移动端,多屏幕尺寸高清屏retina屏适配的解决方案

    移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页 ...

  7. 【转】Retina 屏幕下,网页图片的显示兼容

    感谢 Apple,带来了 Retina 屏幕的革命,让我们可以在电子显示屏上享受到印刷级的分辨率.由于分辨率的提升,网页中的文字.Flash 和 SVG 内容显示得比原来更加精细,但网页中的图片却变得 ...

  8. 解读AppIcon图标设置置信息和App内存警告临界值

    前面有同学问到了iOS内存警告临界值和工程项目里AppIcon的一些配置信息,相信对刚入行的同学来说,可能都会碰到类似的问题,记录一下供后来者查询. 1.先简单说下AppIcon的图标的配置信息 1) ...

  9. 【原】移动web资源整理

    2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题 设备更新换代快——低端机遗留下问题.高端机带来新挑战 浏览器厂商不统一——兼容问题多 网络更复杂——弱网络,页面打开慢 低端机性能 ...

随机推荐

  1. Exception testing

    怎样去验证代码是否抛出我们期望的异常呢?虽然在代码正常结束时候验证很重要,但是在异常的情况下确保代码如我们希望的运行也很重要.比如说: new ArrayList<Object>().ge ...

  2. 一个C++的多态和虚函数实例

    类的说明: code: #include<iostream> #include<string> #define PAI 3.1415926 using namespace st ...

  3. HTTP meta 设置方法

    网页的缓存是由 HTTP 消息头中的 “Cache-control” 来控制的,常见的取值有 private.no-cache.max-age.must-revalidate 等,默认为private ...

  4. NIO Socket非阻塞模式

    NIO主要原理和适用 NIO 有一个主要的类Selector,这个类似一个观察者,只要我们把需要探知的socketchannel告诉Selector,我们接着做别的事情,当有 事件发生时,他会通知我们 ...

  5. Android打包常见错误之Export aborted because fatal lint errors were found

    打包时报如下错误: <ignore_js_op> Export aborted because fatal lint errors were found. These are listed ...

  6. 杭电 HDU ACM 1698 Just a Hook(线段树 区间更新 延迟标记)

    欢迎"热爱编程"的高考少年--报考杭州电子科技大学计算机学院 Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memor ...

  7. Java 编程的动态性,第 8 部分: 用代码生成取代反射--转载

    既然您已经看到了如何使用 Javassist 和 BCEL 框架来进行 classworking (请参阅 本系列以前的一组文章), 我将展示一个实际的 classworking 应用程序.这个应用程 ...

  8. XgCalendar日历插件动态添加参数

    在使用xgcalendar日历插件的时候,参数数组并非只有类型.显示时间.时区等这些参数,还可以根据extParam自定义参数扩展搜索条件,例如根据用户Id搜索不同用户的日历信息,需要将用户的Id存在 ...

  9. js通用对象数组冒牌排序

    数组对象通用 function sort(data, sortFiled, orderby) { var result = data, temp; for (var i = 0; i < res ...

  10. 关于webstorm(phpstorm)设置了编码格式之后还是乱码的问题

    今天在使用phpstorm的时候,页面开始是设置utf-8的,一切正常.但是,当我从一个gbk页面复制了一段代码到phpstorm里面的时候,页面预览的时候,居然打不开了,显示是乱码.接着我就把复制的 ...