zoom和transform:scale()的區(qū)別

muddyway 發(fā)布于2019-08-29 13:27 / 2323人閱讀

摘要：的取值可以為數(shù)值和百分比值，不能取負值。而只是在當前元素上重繪，不會影響其他元素。其他如果被縮放的元素是寬高是以為單位，那么作用在該元素上無效，除了文字或者不是以為單位的子元素，而表現(xiàn)則正常。

zoom和transform:scale()都可以用于縮放，目前移動端存在各種各樣不同屏幕大小的手機，為了兼容不同寬度的屏幕，我們可以基于某一屏幕寬度大小（比如iPhone5的320，這個根據(jù)設計稿來）做出頁面后，再對頁面進行縮放以兼容其他屏幕寬度。

定義

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

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的元素不會影響初始或?qū)嶋H視口的大小。
zoom的取值可以為數(shù)值和百分比值，不能取負值。

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的值是基于坐標系統(tǒng)的，transform的變換過程實際上是矩陣變換的過程，被transform的元素要經(jīng)過一系列的矩陣運算最終確定其坐標。

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的一個屬性值，這是一個縮放函數(shù)。當一個元素被定義了transform:scale(x,y)，可以控制其x方向和y方向上的縮放比例，如果只有一個參數(shù)，那么第二個參數(shù)與第一個參數(shù)相等。
scale的取值只能是數(shù)值，但是可以為負數(shù)。

實際應用

先來看一個簡單的demo

兼容問題

從demo中可以看出zoom縮放是相對于左上角的，而scale默認是相對于元素的中心點縮放的，scale可以通過設置transform-origin來改變縮放的相對位置，當設置transform-origin: 0 0時，scale縮放可以達到和zoom縮放相似的結(jié)果。
前面提到縮放可以應用于移動端各種不同寬度的屏幕的適配上，那么我們就來看看zoom縮放和scale縮放在屏幕適配上的具體差異。下圖從左到右分別是：無縮放在iPhone5上的表現(xiàn)，zoom:1.17在iPhone6上的表現(xiàn)，transform:scale(1.17)在iPhone6上的表現(xiàn)。

代碼如下：
HTML

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下面的這個占滿了整個屏幕的容器上，根據(jù)定義我們可以說在這里使用zoom其實是縮放了整個屏幕（也就是視口），其實就跟在瀏覽器中放大頁面的效果一樣：

那么scale為什么會出現(xiàn)滾動條呢？根據(jù)transform的定義，transform的變換過程是基于坐標系統(tǒng)的，也就是說，外層容器在縮放前四個角的坐標分別為(0,0),(100%,0),(0,100%),(100%,100%),經(jīng)過以(0,0)為變換中心的scale之后，四個角的坐標變?yōu)?0,0),(117%,0),(117%,0),(117%,117%)，超出了視口本身的大小，所以出現(xiàn)了滾動條。
這么看起來，好像兼容的時候就應該用zoom了呢！一開始我也是這么想的，但是后來經(jīng)過同事的指點，scale的問題也是有解決辦法的：那就是給外層容器，即要縮放的那個元素，設置固定的寬高。注意，不是百分比，而是要設置絕對值！比如，設計稿是按照iPhone5的屏幕大小來做的，那么就給外層容器設置width: 320px; height: 504px;，這樣設置之后再用scale就不會出現(xiàn)滾動條了。當然，用zoom也是一樣的效果。

渲染

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

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

其他

如果被縮放的元素是寬高是以rem為單位，那么zoom作用在該元素上無效，除了文字或者不是以rem為單位的子元素，而scale表現(xiàn)則正常。demo看這里

所以，到底是用zoom還是scale，還是要具體情況具體分析。