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

原创 2017年09月01日 02:02:24

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

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-imagecontent: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 下出现光栅问题,制作的 SVG 图片最小要达到父容器的尺寸。

优点:

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

缺点:

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

4. IconFont(IE9)

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

版权声明:本文为小平果原创文章,转载请注明:http://blog.csdn.net/i10630226

相关文章推荐

CSS计数器的使用

CSS计数器最初只能用于ul和ol元素,但在CSS2.1中新增的:before、:after伪类选择器和::before、::after伪元素选择器可以使CSS计数器应用于任何一个元素。 一、和CS...
  • H_O_L_Y
  • H_O_L_Y
  • 2016年06月29日 01:22
  • 189

CSS中的em单位

CSS中有众多单位,常用的px是绝对单位,em则是相对单位。在响应式和移动端的大前提下,使用em能够更方便快捷的一次性调整web文档极其HTML元素的字体大小、宽度、边距、边框等一系列属性,可以说在某...
  • H_O_L_Y
  • H_O_L_Y
  • 2016年07月07日 16:20
  • 2630

常见浏览器兼容性问题与解决方案---整理自网页

(1)浏览器兼容性问题一:不同浏览器的标签默认的外补丁和内补丁不同   问题现象:写几个标签,不加样式控制的情况下,各自的margin和padding的差异较大   这是最常见的一个兼容性问题,几...

微信网页返回到前一列表的历史位置(解决方案)/兼容苹果

这段时间php遇不到什么大的问题,后端的改动也不大,反而是公司的前端开发出了点小问题,这两天,我就针对如何恢复微信网页的历史列表页面做了下实验和探讨,好了,说完废话,就开始吧。场景:在微信公众号中开发...

关于网页事件绑定兼容的一种灵活的绑定方案

关于绑定事件,官方有官方的标准,IE有IE的自己标准,起初最简单直接的绑定方式就是取得DOM元素然后用元素.on事件类型来绑定,但问题是这个绑定方式不能在同一个事件中绑定多个事件处理方法以及当中的事件...

Mac无法兼容NTFS的最佳解决方案

最佳Mac读写软件免费下载地址:http://wm.makeding.com/iclk/?zoneid=13294 NTFS文件系统是Windows NT家族中的其中一种,它取代了老式的FA...

手机网页版JS压缩上传图片--base64位 兼容IOS和安卓

首先,我用到了一款插件,是纯JS压缩上传插件,第一次用CSDN,不太会用,所以我把插件所有代码拷贝在文章末尾。 最基本,加载JS插件script src="__JS__/dist/lrz.mobile...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:MAC显示屏的网页图片兼容方案
举报原因:
原因补充:

(最多只允许输入30个字)