MAC显示屏的网页图片兼容方案

小灰灰 2022-06-09 08:24 74阅读 0赞

# 背景图片不同分辨率下的兼容方案调研 #

PC首页改版中遇到的mac下使用一倍图时，很模糊，一方面，MAC带来了高清屏幕的革命，另一方面，页存在严重的分辨率适配问题，但毕竟我们的用户大部分是在wins平台的机器上，我们为了在满足大部分用户的一般分辨率的同时，一些MAC用户的所要拥有的极致体验，也不容忽视，在网上查阅了一些资料，发现还是由一些解决方案：

网页上的图片一般是两种，一种为背景图，一种是`image`标签。目前PC首页遇到是问题还是背景图的问题比较大，目前的现状是：

### CSS 背景图片兼容性 ###

#### 1 媒介查询 + background-size ####

我们以一张 logo 的背景图为例，首先我们定义 logo 的尺寸为 `100* 40px`，然后为 `#logo` 设定一个 `100*40px` 的背景图片 logo.png:

#logo { width: 100px; height: 40px; background: url(./logo.png) 0 0 no-repeat; }

接下来通过 Meta Queries 判断设备的最小显示像素比，如果大于等于1.5的话，为 \#logo 设定一张 `200*80px` 的背景图片 `logo@2x.png`，然后通过设置 background-size 让背景图显示为 logo 该有的尺寸。这里的显示像素比我们选择 **1.5 作为阈值**，是为了适配除苹果以外的高分辨率设备，比如三星的 Android Pad。

@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) {
        #logo { background-image: url(./logo@2x.png); background-size: 100px auto; }
    }

这样，对于普通的显示设备或是不支持 Meta Queries 的浏览器，会显示标准的背景图，对于支持 Meta Queries 的 Mac 设备，会显示 @2X 的背景图。（ IE6、7、8 均不支持 Meta Queries 和 background-size ）

如果仅是为了适配当前的苹果 Retina 显示屏，也可以直接判断设备的显示像素比是否等于2：

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

**优点：**

1.  只会加载匹配当前设备的最适图片
2.  跨浏览器兼容

**缺点：**

1.  如果背景图片很多的话，需要编写非常冗长的代码

#### 2 image-set（Css4 标准提案） ####

我们同样以之前的 logo 为例，实现方式如下：

#logo { background: url(./logo.png) 0 0 no-repeat; background-image: -webkit-image-set(url(./logo.png) 1x, url(./logo@2x.png) 2x); }

**优点：**

1.  让图片的链接地址在 CSS 中更加集中，代码的维护成本降低
2.  可以让浏览器获取多种尺寸的图片文件，根据屏幕分辨率或是其他一些因素选择适当的图片进行展示，在图片的匹配上可以做到更加智能

**缺点：**

1.  image-set 现在只是 CSS4 的一个草案，目前只有 Webkit 内核的 Safari 6+ 和 Chrome 21+ 支持该属性

最后的这条缺点很致命，期待 W3C 早日将 image-set 写入标准之中，让更多的浏览器支持这种写法。

### 3. 使用 SVG (IE9以上支持) ###

与只能记录像素信息的位图相比，矢量图在不同分辨率下的适配有着先天的优势，目前大多数现代浏览器都已经支持基于 XML 的 SVG 格式图形的显示，网页中一些线条简单的 Logo 、图标或特殊字形，如果转成矢量的 SVG 格式来显示，在 Retina 屏下的适配也就搞定了。

制作 SVG 格式图片，可以使用 Adobe Illustrator 或免费的替代软件 [inkscape][] 。

使用 SVG 格式图片，可以像我们使用其他格式的图片一样，用 HTML 的 `<img>` 标签引用，或用 CSS 的 `background-image` 、 `content:url()` 属性，需要注意的是，无论用哪种形式，最好定义一下图片的尺寸。

<img src="example.svg" width="300" height="200" />
    /* Using background-image */
    .image { background-image: url(example.svg); background-size: 300px 200px; width: 300px; height: 200px; }
    
    /* Using content:url() */
    .image-container:before { content: url(example.svg); /* width and height do not work with content:url() */ }

如果需要兼容 IE6、7、8 或是其他一些不支持 SVG 的浏览器，需要额外用到 PNG 格式的图片副本（关于 PNG 格式 Alpha 通道的兼容问题这里不做讨论）。

#### CSS 背景引用 SVG 格式图片 ####

将 CSS 改写成以下形式即可：

.image {
        background-image: url(example.png);
        background-size: 30p0x 200px;
    }
    
    .svg {
        .image {
            background-image: url(example.svg);
        }
    }

为了获得最佳的跨浏览器兼容效果，避免在 Firefox 和 Opera 下出现[光栅问题][Link 1]，制作的 SVG 图片最小要达到父容器的尺寸。

**优点：**

1.  可以适配任意分辨率
2.  维护成本较低
3.  矢量图可以无限伸缩，更加面向未来

**缺点：**

1.  不适合复杂的图形，复杂的矢量图形可能会导致文件过大
2.  不同的抗锯齿算法，可能会带来不同的浏览感受
3.  IE6、7、8，早期的 Android 浏览器，及其他一些较老的浏览器无法提供对 SVG 的原生支持，使用 标签的方式可能会导致浏览器下载 SVG 文件

### 4. IconFont(IE9) ###

这个和SVG类似，不在介绍，**局限性：**适用于纯色的字体图案。

[inkscape]: http://inkscape.org/
[Link 1]: http://dbushell.com/2012/03/11/svg-all-fun-and-games/