Retina屏为前端留下的一个坑

在近期的开发中,偶然发现前端界面在6s上出现了一条白色亮线,这种情况就像屏幕坏死一样,及其扎眼。经过请教和研究,发现这是高分辨率屏幕带来的结果。

iPhone 6s的屏幕为4.7英寸1334 x 750像素,苹果的一款电脑MacBook Pro达到了2880×1800高分辨率,分辨率约为220 PPI,达到“Retina”级别,而我们普通电脑的屏幕比较高清的有14寸1920X1080。这些高分辨率的屏幕虽然为用户带来了4K级体验,却为前端工程师埋下了一个又一个的坑,让开发变得更加复杂和困难。

同样尺寸的图片变得模糊

在电脑和普通分辨率的Android手机上看上去很清晰的图片,放到Retina屏上会出现模糊。期初我以为是图片太小而引起的,觉得解决这一问题的办法就是把图片加大,放到高分辨率屏幕下时,进行缩小显示,就可以变清晰。但在通过向朋友请教之后,才了解,核心问题在于:Retina屏将传统的四个物理像素点模拟一个像素点。由于这个原因,几乎所有的图片甚至是字体,都有可能出现模糊的情况,具体可以看知乎上大神对此的回复

@解决思路:

图片或字体在Retina上出现的模糊,要从两个方面去解决。第一个是尺寸,在普通屏幕上的图片,需要将长宽同时扩大到原来的2倍,才能在Retina上显示为原来的尺寸。第二个是直接在Retina屏上作图,拒绝图片放到Retina上的平滑处理,如果在设计作图的时候就直接再Retina上进行处理,那么出来的图本身就会是普通屏幕的放大版,兼容了前面的第一点,同时,避免了在其他retina屏上图片为了拉伸出现锯齿而自动采取的平滑处理。

在CSS中,有一个属性为image-set,可以为不同的屏幕配不同尺寸的图片。具体用法如下:

img {
    background: url(pic.png) 0 0 no-repeat;
    background-image: -webkit-image-set(url(pic.png) 1x, url(pic@2x.png) 2x);
    background-image: -moz-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x);
    background-image: -ms-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x);
    background-image: -o-image-set(url(url(pic.png) 1x,url(images/pic@2x.png) 2x);
}
 /*其中@2x.png为后缀的图片就是为Retina准备的*/
或

<img src="pic.png" srcset="pic@2x.png 2x" />

网页元素宽度高度有半个像素的概念

在我们以往的前端经验中,px为单位的长度没有办法再进行切割,我们在css中写12.5px这样的写法是没有效果的,因为传统屏幕中一个px就是一个px,没有0.5px的概念。这是由传统屏幕的性质决定的,一个物理像素和一个逻辑像素是一一对应的。但是四个物理像素模拟一个物理像素的高分辨率屏出现后,这种特性被打破。当一个网页元素的宽度或高度不是整数,而出现小数位长度的时候,就会出现我文章开头的情况。文章开头所说的那条白线,是因为我的元素高度出现了0.09px,因此,四个像素组成的一个逻辑像素中,上面两个像素被渲染为黑色,而下面两个像素并没有被渲染,从而下面两个像素组成的一条线就呈现为一条白色亮线,从逻辑上讲,它仅高0.5px。

@解决思路:

避免小于0.5px单位的长度出现,当长度大于0.5px的时候,就会完全占满四个物理像素组成的一个逻辑像素。因此,尽可能在一些颜色与邻近元素对比度大的元素中,采用绝对长度单位px,而不使用% em rem pt等非绝对长度单位。不过,Retina屏为更小精度的定位提供了可能,你甚至可以采用0.4px这样的方法来专门为Retina屏进行一些适配。

元素变小,错位

这应该不属于Retina屏造成的直接结果,因为所有高分辨率的屏幕,都会使得我们在普通分辨率下看上去正常的尺寸变的比较小。比如在我们一般的14寸笔记本电脑屏幕上,我们通常用1000px左右作为网页固定宽度的网站,到了高分辨率屏幕下,就向在宽敞的屏幕中间挂了一条门联一样,感觉相似上个世纪遗留下来的网站,让高分辨率屏幕的使用者站在鄙视链的顶端。为了迎合这种变化,一些网站开发者并不固定宽度,而是采用百分比的形式来进行开发和定位,结果也是徒然的,由于分辨率高的情况下,一行可以容纳更多文字,传统屏幕上显示3行文本,显得很美观,而在此屏幕上则一行就显示完了,其丑无比。整个界面就像是被程序员恶作剧般,乱的一塌糊涂。

@解决思路:

采用屏幕适配来为不同宽度的屏幕显示不同的效果。一般而言,能够采用retina屏的电脑,都已经升级到高版本的系统,自带的浏览器版本也比较高,都支持html5的特性,因此,我们在设计制作网页的时候,需要专门为这帮高端用户设计多余的页面元素,使用responsive css的方法,展示给他们更多的内容,从而保证在高分辨率屏幕上和普通分辨率屏幕上都能很好的显示。

2015-11-01