zoom和transform:scale()的區別

zoom和transform:scale()均可以用於縮放，目前移動端存在各類各樣不一樣屏幕大小的手機，爲了兼容不一樣寬度的屏幕，咱們能夠基於某一屏幕寬度大小（好比iPhone5的320，這個根據設計稿來）作出頁面後，再對頁面進行縮放以兼容其餘屏幕寬度。

定義

zoom和transform:scale()具體有什麼區別呢？先來看看官方的定義：

Specifies the initial zoom factor for the window or viewing area. This is a magnifying glass type of zoom. Interactively changing the zoom factor from the initial zoom factor does not affect the size of the initial or the actual viewport.

zoom至關因而一個放大鏡，縮放被zoom的元素不會影響初始或實際視口的大小。
zoom的取值能夠爲數值和百分比值，不能取負值。

A transformation is applied to the coordinate system an element renders in through the transform property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix like defined in Mathematical Description of Transform Functions, then multiplying the matrices.

先來看看transform的定義，transform的值是基於座標系統的，transform的變換過程其實是矩陣變換的過程，被transform的元素要通過一系列的矩陣運算最終肯定其座標。

The value of the transform property is a list of transform-function...specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it takes a value equal to the first.

scale()是transform的一個屬性值，這是一個縮放函數。當一個元素被定義了transform:scale(x,y)，能夠控制其x方向和y方向上的縮放比例，若是隻有一個參數，那麼第二個參數與第一個參數相等。
scale的取值只能是數值，可是能夠爲負數。

實際應用

先來看一個簡單的demo

兼容問題

從demo中能夠看出zoom縮放是相對於左上角的，而scale默認是相對於元素的中心點縮放的，scale能夠經過設置transform-origin來改變縮放的相對位置，當設置transform-origin: 0 0時，scale縮放能夠達到和zoom縮放類似的結果。
前面提到縮放能夠應用於移動端各類不一樣寬度的屏幕的適配上，那麼咱們就來看看zoom縮放和scale縮放在屏幕適配上的具體差別。下圖從左到右分別是：無縮放在iPhone5上的表現，zoom:1.17在iPhone6上的表現，transform:scale(1.17)在iPhone6上的表現。

代碼以下：
HTML

<div class="container">
    <div class="box red"></div>
    <div class="box blue"></div>
    <div class="box red"></div>
</div>

CSS

html,body {height: 100%;}
.container {height: 100%;}
.box {height: 160px; font-size: 20px; text-align: center;}
.red {background-color: rgba(255,0,0,.5);}
.blue {background-color: rgba(0,0,255,.5);}

外層容器寬高爲100%，佔滿整個屏幕。由於zoom是做用在body下面的這個佔滿了整個屏幕的容器上，根據定義咱們能夠說在這裏使用zoom實際上是縮放了整個屏幕（也就是視口），其實就跟在瀏覽器中放大頁面的效果同樣：

那麼scale爲何會出現滾動條呢？根據transform的定義，transform的變換過程是基於座標系統的，也就是說，外層容器在縮放前四個角的座標分別爲(0,0),(100%,0),(0,100%),(100%,100%),通過以(0,0)爲變換中心的scale以後，四個角的座標變爲(0,0),(117%,0),(117%,0),(117%,117%)，超出了視口自己的大小，因此出現了滾動條。
這麼看起來，好像兼容的時候就應該用zoom了呢！一開始我也是這麼想的，可是後來通過同事的指點，scale的問題也是有解決辦法的：那就是給外層容器，即要縮放的那個元素，設置固定的寬高。注意，不是百分比，而是要設置絕對值！好比，設計稿是按照iPhone5的屏幕大小來作的，那麼就給外層容器設置width: 320px; height: 504px;，這樣設置以後再用scale就不會出現滾動條了。固然，用zoom也是同樣的效果。

渲染

從上面的demo中還能夠看出被縮放的元素的寬高用js獲取時仍是縮放前的原始寬高，可是，在審查元素時zoom和scale仍是有區別的：

zoom還有一點比較詭異，戳demo，當元素的寬度不顯式設置（即默認100%）或者設置爲百分比，用zoom對元素縮小以後寬度居然比原來大了！大了！了！若是是放大的話寬度就會比原來小！小！
因此，若是你要獲取元素縮放以後的寬高，用zoom彷佛是比較麻煩的。scale的話就比較簡單了，只要把用js獲取到的寬高*縮放的倍數就是元素縮放以後的實際寬高了。
另外，zoom對性能不友好，會影響到頁面中的其餘元素，在文檔流中給任一元素加上zoom會引發整個頁面的從新渲染。從最開始的demo中就能夠看到被zoom的元素的父元素的高度明顯小了。而scale只是在當前元素上重繪，不會影響其餘元素。

其餘

若是被縮放的元素是寬高是以rem爲單位，那麼zoom做用在該元素上無效，除了文字或者不是以rem爲單位的子元素，而scale表現則正常。demo看這裏

因此，究竟是用zoom仍是scale，仍是要具體狀況具體分析。