模仿JavaScript的瀏覽器縮放

Question

如何用JavaScript縮小整個文檔？

我的目標是模仿內置的瀏覽器縮放並將整個文檔縮放到90％。

我一直在使用

document.body.zoom 

這僅適用於explorer和頁面變得混亂（很多元素都是圍繞移動）嘗試。

有沒有辦法做到這一點？

Answer 1

There you go:

使用：

document.body.style.zoom=1.0;this.blur(); 

1.0意味着100％

150％將1.5 1000％。將10.0

this.blur（）表示該光標，也許你選擇了一個輸入字段，失去了每個選擇項目的焦點。

或：

您可以使用CSS3元素zoom（Source）

Firefox does not allow與瀏覽器縮放，因爲你無法通過JavaScript或某物訪問用戶的屬性。

所以，你可以使用一些CSS樣式，允許縮放（CSS3：縮放，如上所述）或增加文本大小！例如，您可以使用其中包含不同的CSS文件。但是在這裏你有「跳躍」的問題，因爲風格化的CSS元素（浮動等）不得不「互動」實際上屬性。

我上面貼的變焦效果很好Chrome和IE8 +（FF提到不支持）

- 附加信息：

Here是如何與縮放選項完全相同放大的例子。 示例應用程序可以找到here

縮放選項通常處理縮放，因爲您的瀏覽器！

但是，這仍然是所有的東西，這是不支持的Firefox，或者也許Safari瀏覽器& Opera？在鉻和IE瀏覽器它的作品！

另一種解決方案是：將主尺寸放在「em」中，然後通過設置尺寸如100％，110％（遍佈css）來解決。所以你可以有不同的CSS文件，「只是」需要替換％屬性！

但我不認爲可能有其他解決方案！:(

Answer 2

我這樣做與jQuery，工程用火狐，Safari，Chrome和IE9 +：

window.onload = function() { 
var currFFZoom = 1; 
var currIEZoom = 100; 

$('#In').on('click',function(){ 
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6){//Firefox 
     var step = 0.02; 
     currFFZoom += step; 
     $('body').css('MozTransform','scale(' + currFFZoom + ')'); 
    } else { 
     var step = 2; 
     currIEZoom += step; 
     $('body').css('zoom', ' ' + currIEZoom + '%'); 
    } 
}); 

$('#Out').on('click',function(){ 
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6){//Firefox 
     var step = 0.02; 
     currFFZoom -= step;     
     $('body').css('MozTransform','scale(' + currFFZoom + ')'); 

    } else { 
     var step = 2; 
     currIEZoom -= step; 
     $('body').css('zoom', ' ' + currIEZoom + '%'); 
    } 
});}; 


<input type="button" id="Out" alt="Zoom Out"/> 
<input type="button" id="In" alt="Zoom In"/> 

Answer 3

下面是一個使用我的解決辦法CSS變換：規模（）和JavaScript/jQuery的：

<!-- Trigger --> 
<ul id="zoom_triggers"> 
    <li><a id="zoom_in">zoom in</a></li> 
    <li><a id="zoom_out">zoom out</a></li> 
    <li><a id="zoom_reset">reset zoom</a></li> 
</ul> 

<script> 
    jQuery(document).ready(function($) 
    { 
     // Set initial zoom level 
     var zoom_level=100; 

     // Click events 
     $('#zoom_in').click(function() { zoom_page(10, $(this)) }); 
     $('#zoom_out').click(function() { zoom_page(-10, $(this)) }); 
     $('#zoom_reset').click(function() { zoom_page(0, $(this)) }); 

     // Zoom function 
     function zoom_page(step, trigger) 
     { 
      // Zoom just to steps in or out 
      if(zoom_level>=120 && step>0 || zoom_level<=80 && step<0) return; 

      // Set/reset zoom 
      if(step==0) zoom_level=100; 
      else zoom_level=zoom_level+step; 

      // Set page zoom via CSS 
      $('body').css({ 
       transform: 'scale('+(zoom_level/100)+')', // set zoom 
       transformOrigin: '50% 0' // set transform scale base 
      }); 

      // Adjust page to zoom width 
      if(zoom_level>100) $('body').css({ width: (zoom_level*1.2)+'%' }); 
      else $('body').css({ width: '100%' }); 

      // Activate/deaktivate trigger (use CSS to make them look different) 
      if(zoom_level>=120 || zoom_level<=80) trigger.addClass('disabled'); 
      else trigger.parents('ul').find('.disabled').removeClass('disabled'); 
      if(zoom_level!=100) $('#zoom_reset').removeClass('disabled'); 
      else $('#zoom_reset').addClass('disabled'); 
     } 
    }); 
</script>