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

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

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

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

定義

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

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相當(dāng)于是一個(gè)放大鏡，縮放被zoom的元素不會(huì)影響初始或?qū)嶋H視口的大小。
zoom的取值可以為數(shù)值和百分比值，不能取負(fù)值。

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.

先來(lái)看看transform的定義，transform的值是基于坐標(biāo)系統(tǒng)的，transform的變換過(guò)程實(shí)際上是矩陣變換的過(guò)程，被transform的元素要經(jīng)過(guò)一系列的矩陣運(yùn)算最終確定其坐標(biāo)。

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

實(shí)際應(yīng)用

先來(lái)看一個(gè)簡(jiǎn)單的demo

兼容問(wèn)題

從demo中可以看出zoom縮放是相對(duì)于左上角的，而scale默認(rèn)是相對(duì)于元素的中心點(diǎn)縮放的，scale可以通過(guò)設(shè)置transform-origin來(lái)改變縮放的相對(duì)位置，當(dāng)設(shè)置transform-origin: 0 0時(shí)，scale縮放可以達(dá)到和zoom縮放相似的結(jié)果。
前面提到縮放可以應(yīng)用于移動(dòng)端各種不同寬度的屏幕的適配上，那么我們就來(lái)看看zoom縮放和scale縮放在屏幕適配上的具體差異。下圖從左到右分別是：無(wú)縮放在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%，占滿整個(gè)屏幕。因?yàn)閦oom是作用在body下面的這個(gè)占滿了整個(gè)屏幕的容器上，根據(jù)定義我們可以說(shuō)在這里使用zoom其實(shí)是縮放了整個(gè)屏幕（也就是視口），其實(shí)就跟在瀏覽器中放大頁(yè)面的效果一樣：

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

渲染

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

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

其他

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

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