MAC显示屏的网页图片兼容方案
来源:互联网 发布:工艺软件有什么 编辑:程序博客网 时间:2024/05/16 15:11
背景图片不同分辨率下的兼容方案调研
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) { ...}
优点:
- 只会加载匹配当前设备的最适图片
- 跨浏览器兼容
缺点:
- 如果背景图片很多的话,需要编写非常冗长的代码
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);}
优点:
- 让图片的链接地址在 CSS 中更加集中,代码的维护成本降低
- 可以让浏览器获取多种尺寸的图片文件,根据屏幕分辨率或是其他一些因素选择适当的图片进行展示,在图片的匹配上可以做到更加智能
缺点:
- 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 下出现光栅问题,制作的 SVG 图片最小要达到父容器的尺寸。
优点:
- 可以适配任意分辨率
- 维护成本较低
- 矢量图可以无限伸缩,更加面向未来
缺点:
- 不适合复杂的图形,复杂的矢量图形可能会导致文件过大
- 不同的抗锯齿算法,可能会带来不同的浏览感受
- IE6、7、8,早期的 Android 浏览器,及其他一些较老的浏览器无法提供对 SVG 的原生支持,使用 标签的方式可能会导致浏览器下载 SVG 文件
4. IconFont(IE9)
这个和SVG类似,不在介绍,局限性:适用于纯色的字体图案。
- MAC显示屏的网页图片兼容方案
- Retina 显示屏的网页图片兼容方案
- 基于S3c2440的多种显示屏测试方案
- 兼容低版本浏览器的图片选择预览方案
- Retina 屏幕下,网页图片的显示兼容
- 关于网页事件绑定兼容的一种灵活的绑定方案
- “如何将16进制码流在html中显示为图片”兼容多个浏览器的方案。
- “如何将16进制码流在html中显示为图片”兼容多个浏览器的方案
- IE与FF不兼容网页布局CSS问题解决方案()
- [lcm] Qualcomm平台兼容多显示屏lcd的方法&并从lk传输到kernel过程
- 手持式设备18位彩色LCD显示屏的一种电池图标显示方案
- 底部浮动条的一种兼容方案
- js实现兼容的本地化存储方案
- Drawable 着色的后向兼容方案
- 显示屏的认识!
- 禁用显示屏的休眠
- 显示屏的各分辨率
- 1602显示屏的使用
- LintCode-----36.翻转链表 II
- ansible
- Realtime Multi-Person 2D Pose Estimation using Part Affinity Fields ∗
- 前端学习之路-看到的优秀文章
- C++ 观察者模式 (包含模板)
- MAC显示屏的网页图片兼容方案
- SPOJ
- CodeForce 687A 二分图 交叉染色
- ubantu16.04lts 创建python虚拟环境
- iOS UIScrollview 和侧滑手势冲突解决方法
- python库大全
- iOS UIScrollview 取消弹簧效果
- HDU
- HDU4355 三分