首先需要明确一点的是,火狐浏览器全系列不支持CSS的zoom缩放属性。
浏览器兼容查询网站:/
所以此时只能通过transform的scale实现放缩
代码很简单,两行即可:
但是不建议用这个,最好加属性前缀,往下看
transform:scale(..);transform-origin:..;
其中scale可以只传一个参数,也可以传两个参数表示X,Y方向。
transform-origin指定缩放后放置位置的偏移(也可以理解为缩放中心),不设置则放置中心不变往四周延展(也可以理解为以原来的中心为中心直接进行放缩)。第一个参数可以为(left,center,right),第二个参数可以为(top,center,bottom),两个参数也都可以直接赋值数值或者百分比。
为了避免属性对其他浏览器可能产生的影响,这里建议使用FireFox的属性前缀-moz-
-moz-transform:scale(..);-moz-transform-origin:..;
其他浏览器的属性前缀则如下:
-moz- 代表firefox浏览器私有属性-ms- 代表ie浏览器私有属性-webkit- 代表safari、chrome私有属性-o- 代表Opera
补充:
在使用jquery.print.js实现前端DOM打印的时候,使用scale所取的数值和使用zoom所取的数值,想达到相同的打印效果的话,往往这两个值不相等的。我自己1920分辨率WIN10,Chrome和FireFox浏览器,往A4纸上去打印,几乎相同的效果Chrome是zoom:1.5,FireFox就变成了-moz-transform:scale(1.75);