走向视网膜(Retina)的Web时代

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

维基百科将Retina译为“视网膜”。"Retina"一词,原意是“视网膜”的意思,指显示屏的分辨率极高,使得肉眼无法分辨单个像素。

苹果的“iPhone4”和"new iPad"以及“Macbook Pro”中已经使用了Retina(视网膜)技术。这是一种新的屏幕的显示技术。苹果表示,Retina屏幕是一种具备超高像素密度的液晶屏,它可以将960x640的分辨率压缩到一个3.5英寸的显示屏内。也就是说,该屏幕的像素密度达到326像素/英寸(ppi)。

苹果采用Retina屏幕技术得到了更多人的亲眯,因为Retina给画面带来了前所未有的清晰平滑效果。相比之下,互联网非常的庞大,从当初的普通屏幕过渡到Retina是件缓慢而又痛苦的事情。在缺少行业标准来简化这个过程,每个Web开发人员和设计者为了确保他们的用户得到最好的视觉体验,Retina还是给他们带来了些小麻烦。

为了解决这些麻烦,更好的从事Web开发和设计,做为一名紧跟时代前沿技术的Web前端人员是很有必要了解学习Retina。

在深入了解和学习Retina之前,我们需要了先学习一些基本概念,这些基本概念将更好的带领我们深入下去。

设备像素

Retina web

设备像素也被称为物理像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

屏幕密度

屏幕密度是指一个设备表面上存在的像素数量,它通常以每英寸有多少像素来计算(PPI)。苹果将这个营销出一个专业的术语“Retina”,将其称为双密度显示,声称人类的肉眼将无法区分单个像素。当一个显示屏像素密度超过300ppi时,人眼就无法区分出单独的像素。这也是讲:显示设备清晰度已达到人视网膜可分辨像素的极限。因此行动电话显示器的像素密度达到或高于300ppi就不会再出现颗粒感,而手持平板类电器显示器的像素密度达到或高于260ppi就不会再出现颗粒感,苹果行动电脑的Retina显示器像素密度只要超过200ppi就无法区分出单独的像素。

CSS像素

Retina web

CSS像素是一个抽象的单位,主要使用在浏览器上,用来精确的度量(确定)Web页面上的内容。一般情况下,CSS像素被称为与设备无关的像素(device-independent像素),简称为“DIPs”。在一个标准的显示密度下,一个CSS像素对应着一个设备像素。

<div height="200" width="300"></div>

上面的代码,将会在显示屏设备上绘制一个200x300像素的盒子。但是在Retina屏幕下,相同的div却使用了400x600设备像素,保持相同的物理尺寸显示,导致每个像素点实际上有4倍的普通像素点,如图所示:

Retina web

反过来说,一个CSS像素点实际分成了四个,这样就造成了颜色只能近似选取,于是,我们看上去就变得模糊了。那么在Web开发和设计中,我们可以通过"device-pixel-ratio"来解决。

device-pixel-ratio,
-o-device-pixel-ratio,
-moz-device-pixel-ratio,
-Webkit-device-pixel-ratio {
  …
}

或者你可以使用将来的写法:

device-pixel-ratio,
-o-min-device-pixel-ratio,
min--moz-device-pixel-ratio,
-Webkit-min-device-pixel-ratio {
  …
}

在javascript中,“window.devicePixelRatio”可以用来获得相同的比率,虽然目前浏览器支持还有限。但这种技术将会慢慢被支持。

"window.devicePixelRatio"其实指的就是“devicePixelRatio”,我们来看看“window.devicePixelRatio”是什么?简单点说“window.devicePixelRatio”是设备上物理像素和设备像素(device-independent pixels (dips))的比例。他有一个计算公式:window.devicePixelRatio = 物理像素/dips。

dip或dp,(device independent pixels,设备独立像素)与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

所有非视网膜屏幕的iPhone在垂直屏幕显示的时候,他的宽度为320物理像素,当你通过“meta”改变“viewport”时:

<meta name="viewport" content="width=device-width">

这个时候,视窗布局宽度变成320px(不同于视觉区域宽度,不放大显示情况下,两者大小一致),这样视觉上,整个页面很自然的覆盖在屏幕上,如下图所示:

Retina web

这样,非视网膜屏幕的iphone上,屏幕物理像素320像素,独立像素也是320像素,因此window.devicePixelRatio等于1.

而对于视网膜屏幕的iphone,如iphone4s, 纵向显示的时候

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/towards-retina-web.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部