其實關於scale，我之前是用他來搞一些css3的特效的放大縮小啊，玩的也挺6666，而*zoom：1之前是用來做css的hack，也就是觸發IE6/7的haslayout清除浮動的。終於某天，好事的UE說1px的線在retina的屏幕下顯得膀大腰圓要我們修復這個bug。參考 http://www.tuicool.com/articles/ZRv6bun，在做了一系列的實驗之后采取了使用scale的方案，順便驗證了android真的不支持0.5px這個理論。
本來用着scale的這個解決方案還蠻好，只是后來為了解決一些奇葩的布局問題發現這個zoom,scale其實有點料可挖的。
一、分別講下scale與zoom
我們先看一下scale,scale是隸屬於transform的2d轉換的王牌軍，IE9+、firefox、opera、safari、chrome基本現代瀏覽器都支持。scale同時支持scaleX,scaleY以及scale，默認是從左上角開始縮放且scale的取值可以為負值，當scale的值為負值scale相對於右下角進行縮放。但是scale只支持數值，normal、百分比均為無效值。最重要的是scale並不會引起整個頁面的重繪，因為scale在生效的時候該元素本身的大小是沒有發生變化的，只是在當前元素上進行重繪。
我們看一段測試代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>scale測試</title> 6 <style> 7 .s1, .s2 { 8 height: 200px; 9 width: 200px; 10 background-color: #d0d0d0; 11 } 12 13 .s3 { 14 float: left; 15 height: 80px; 16 width: 80px; 17 border: 1px solid #000; 18 font-size: 12px; 19 } 20 21 .s1 .s3 { 22 transform: scale(.5); 23 tranform-origin: 0 0; 24 background-color: yellow; 25 } 26 27 .s2 .s3 { 28 background-color: pink; 29 } 30 31 32 </style> 33 </head> 34 <body> 35 <div class="s1"> 36 <div class="s3">我是小小鳥</div> 37 <div class="s3">rtrtrt</div> 38 </div> 39 <div class="s2"> 40 <div class="s3">我是小小鳥</div> 41 <div class="s3">rtrtrt</div> 42 </div> 43 44 </body> 45 </html>
由代碼和效果圖可知，scale雖然能在當前元素進行重繪，但實際上該元素所占的空間是沒有發生變化的。但是包括border在內的所有屬性確實是被縮放了，下面我們再看下zoom。
把上面的代碼.s1 .s3改成如下：
.s1 .s3 {
zoom: .5;
background-color: yellow;
}
我們可以看見改成zoom的時候，不僅是被zoom的元素發生了重繪，頁面中其他元素也發生了重繪從而導致了頁面整個布局的改變且zoom縮放就是相對於左上角而scale默認則是居中縮放。還有一點是zoom對元素的border-width和font-size看起來並沒有效果。
zoom可以支持的值類型有百分比值，數值和normal關鍵字，但是需要注意雖然Chrome/Sarari支持zoom屬性，但其實zoom並不是標准屬性
二、zoom與scale的區別總結
1、兼容性的差異：zoom為非標准屬性，除firefox瀏覽器已在其他瀏覽器中得到了良好支持，scale已經是標准屬性除IE8-外現代瀏覽器均能較好的支持；
2、取值差異：zoom的合法值可以為數值、百分比以及normal而scale則只能為數值；
3、縮放中心點差異：zoom縮放中心點為左上角，而scale默認為中心點但可以通過transform-origin進行改變；
4、重繪差異：zoom的縮放改變了元素占據空間的大小會引起整個頁面的重繪而scale縮放所占據的原始尺寸不變，只在當前元素進行重繪；
5、渲染計算方法可能有差異：zoom為銳化，而scale為模糊；
6、對文字的縮放規則不一致:zoom的縮放依然受限於最小12px的中文大小限制；而scale就是純粹就圖形進行比例控制，文字50%原來尺寸；
7、這點應該是與上一條相似，border為1px的時候zoom受限於瀏覽器最小顯示1px；而scale就純粹進行比例控制，不受限。
三、總結&鳴謝
綜上，想改變移動端1px在retina屏看起來較粗的問題還得使用scale,scale突破了瀏覽器的最小顯示限制，讓你自由飛翔。
感謝張鑫旭大大的博文，地址如下 http://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-scale-diff/ 是我參考的重要來源，對元素渲染計算方法的差異如果不是張鑫旭大大的博文我自己是沒有注意的。
以上，如有錯誤歡迎指出~