开头

今天实习改bug的时候，遇到了一个兼容性的bug： 有一个弹窗，检测到当前是手机设备的时候对弹窗进行一个放大的处理，但是在一台苹果手机上出现了问题：弹窗放大了，但是里面的文字没有放大，还是原来的大小。

然后我就去看弹窗初始化的代码，因为我个人的css基础挺烂的，之前从来没有用过zoom属性来进行缩放的操作，所以找了挺久才发现可能是zoom的问题，随后我就赶紧去学习了一下zoom属性相关的内容。

zoom

css的zoom是IE浏览器的专有属性，可以设置元素的缩放比例。 虽然Chrome/Safari浏览器支持了zoom属性，但是，其实zoom并不是标准属性。Firefox不支持。

使用方法：

div{
    zoom：2; //可以为数字或百分比，表示放大缩小
}

zoom的缩放是基于元素的左上角，且会直接改变原有元素占据的空间，会影响文档流(会更改布局，意味着会产生回流)，且zoom对文字的缩放受限于12px。

随后我就想到了可以使用transform:scale来进行缩放，替代zoom。

transform: scale

transform: scale 是写入规范的，目前的浏览器基本都兼容。

使用方法：

div{
    transform: scale(2); //可以为数字百分比以及负数
    transform: scaleX(2); //scaleY(2) 可以单独对x轴或y轴进行缩放
    transform: scale(1,2); 
}

scale()的缩放是基于元素的中心点，如果要切换基点需要使用transform-origin:(top,left)进行切换，top left可以为数字或关键字。

scale()不会改变元素原本占据的空间，即不会改变文档流，且scale()对文字的缩放不受限。

最后

我在使用transform: scale()替换掉zoom后使用可以复现的设备测试发现问题确实解决了，看来就是zoom兼容性的问题，但是因为zoom更改文档流的特性，原先的布局也被打乱了，后面又调整了好久的布局，哭哭TAT