放大缩小那些事

science

前端 javascript

weber

也可以将画布放得很大,看清楚任何小的东西

如果说上面那些差异,我还可以通过分浏览器控制定位偏移来保持一致的话

那下面的demo就真的是。。。

Demo2

设置zoom前

这话,要从iPresst说起

比较值得称道的是,使用zoom不管放大得多大,文本元素仍然保持着清晰的边缘和质量

不是放大镜​

zoom:50;

Demo4

经过我的不懈试验,发现这个属性在不同浏览器下有三种不同的表现

第一种: chrome、firefox等现代浏览器第二种: IE8。。。第三种: 除了IE8的其他IE浏览器

可以把画布缩得很小,看清楚全局的东西

显然,这些效果都是用CSS3实现的,CSS3 transform 属性中的scale

但是,我们要兼容IE怎办?

怎办?于是就说到今天的主角了……

结果发现别的功能,如旋转都可以去掉,但有一个功能还是要支持

那就是缩放如让内容放大适应浏览器窗口如点击图片时放大图片至窗口大小

在这种最简单的情况下,表现一致

​设置 #container{zoom:2} 的结果

所有IE浏览器

chrome

估计是这个属性用的人少,使用的过程中,我发现了不少坑,一个一个地踩了进去

最大的坑是:

不一致性

Demo1

设置zoom之前

Demo3

IE8显示成这个样,原来的大小?!!搞毛啊

IE9、IE7、IE6

IE8

chrome

Over

IE9

IE8

没办法,我们对IE8及以下的浏览器做了降级体验,取消掉这些高级效果

IE10直接支持 transformIE9支持 ms-transformIE8以下完全不支持

zoom

IE下触发hasLayout的一种比较常见的方法就是增加  zoom:1;  这样一个属性

前面那些都是引言啊,只是为了炫一下效果,现在开始才是正题,咳咳。。。

BTW

zoom:1;

zoom:5;

但zoom的本职工作就是放大缩小,跟scale很像,而且连IE6都支持这个属性

IE8

IE8下设置left只偏移了50px,而其他浏览器都正常地偏移了100px!

​设置 #container{zoom:2} 的结果

IE9、IE7、IE6、chrome

IE9、IE7、IE6

IE8

chrome

IE9、IE7、IE6都向左偏移了50px,IE8和chrome偏移了100px!!

重播 分享 评论
×
×

iPresst

版本:1.0

Copyright © iPresst.com. All Rights Reserved.

创作者:TAT.Aishen, TAT.CG, TAT.DM, TAT.Jarvis, TAT.Kinvix, TAT.Weber, TAT.Yussica