我如何能實現像瀏覽器的CTRL +

Question

我想要一個按鈕，放大變焦功能（增加字體大小是主要目標，但圖像和表格等也想）

Answer 1

有zoom css3 property正是這個，最新的webkit瀏覽器（chrome，safari）支持它。

編輯：顯然，即使IE6支持它在某些方面，檢查以下

的意見對你的身體或容器設置縮放CSS屬性應的伎倆。可以像使用jQuery一樣簡單，如$('body').css('zoom', '200%');。

檢查http://jsfiddle.net/Ks6Yn/1/爲例

Answer 2

的工作理念是使用JavaScript/jQuery在單擊時加載覆蓋CSS樣式，例如。所有東西的大小都會覆蓋基本的大小。

Answer 3

方法1

您需要設置一個變量存儲您的變焦量。

當您應用放大或縮小時，請相應地更改此變量並更改頁面上每個元素的大小，顯示爲塊的元素的寬度和高度以及字體大小。

方法2

有不同的樣式，加載此刻的變焦值的變化所需要的一個。

方法3

變化相對於縮放級別的元素只有類和爲每個類變焦的CSS規則。

無論如何，你試圖做的事對我看起來是錯誤的。

Answer 4

下面的代碼zoomes它適合1,024像素= 100％，如果可用空間較小的頁面。如果有足夠的空間，頁面將按原樣顯示。

https://jsfiddle.net/xgqw5bjo/3/

注意，與setting style via jQuery版本不作爲jQuery的工作處理前綴本身，而是在這個解決方案，我需要控制他們每個人。

~function() { 
 
    var $window = $(window), $body = $("body"); 
 
    var ie = document.documentMode; 
 
    
 
    function updateSizes() { 
 
    var width = $window.width(), scale = Math.min(width/1024, 1); 
 

 
    var style = $body[0].style; 
 
    
 
    style.msZoom = ie === 8 || ie === 9 ? scale : 1; 
 
    style.zoom = ie === 10 || ie === 11 ? 1 : scale; 
 
    style.mozTransform = "scale(" + scale + ")"; 
 
    style.oTransform = "scale(" + scale + ")"; 
 
    style.transform = "scale(" + scale + ")"; 
 
    } 
 

 
    $window.resize(updateSizes); 
 
    updateSizes(); 
 
}();

html { 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    transform-origin: top left; 
 
} 
 

 
@supports (transform: scale(1)) { 
 
    body { 
 
    -ms-zoom: 1 !important; 
 
    zoom: 1 !important; 
 
    } 
 
} 
 

 
div { 
 
    width: 1024px; 
 
    height: 128px; 
 
    background: url(//i.stack.imgur.com/eMSCb.png) repeat-x; 
 
    background: repeating-linear-gradient(to right, blue, red 256px); 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div></div>

理論上應該按以下方式工作：

• IE 5。5 - 7 變焦
• IE 8 - 9個-MS-變焦
• IE 10 - 11 變換 & 即

• 邊緣12+ 變換 & @supports

• Opera 11.5 - 12.0 -o-tra nsform

• 歌劇12.1 變換

• 火狐3.5 - 15 -moz變換

• 火狐16+ 變換

• 火狐22+ 變換（具有@supports ，但還沒有zoom）

• 的Safari 4 - 8 變焦

• 的Safari 9+ 變換 & @supports（出現在同一時間）

• 鉻4 - 27 變焦

• Chrome 28 - 35 zoom（有@supports，但還沒有transform還）
• 鉻36+ 變換 & @supports

如果我添加-webkit-transform，它在Safari 3.1開始工作 - 3.2，而將剎車了很多別人的。

其實對於現代瀏覽器的結果是通過使用transform和disgarding zoom。所有現代活着的瀏覽器（Edge，Firefox，Safari，Chrome）已經具有轉換 & @supports並符合標準，所以代碼將來不會被破壞。

測試中的代碼：

• IE 11
• 邊緣15
• 歌劇12。18
• 火狐50
• Safari 5的（勝）
• 的Safari 10（蘋果機）
• 鉻54，約瀏覽器58個

詳細支持：

• http://caniuse.com/#feat=css-zoom
• http://caniuse.com/#feat=css-featurequeries（約@supports）
• http://caniuse.com/#feat=transforms2d

---

^{Translation of my answer on ruSO.}