web-dev-qa-db-ja.com

JavaScriptでブラウザのズームを模倣する

JavaScriptでドキュメント全体をズームアウトするにはどうすればよいですか。

私の目標は、組み込みのブラウザーズームを模倣して、ドキュメント全体を90％にズームすることです。

私は使ってみました

document.body.zoom

これはExplorerでのみ機能し、ページは乱雑になります（多くの要素が移動しています）。

これを行う方法はありますか？

javascriptzoom
19
lior r

そこに行きます：

使用する：

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

1.0は100％を意味します

150％は1.5、1000％は10.0

this.blur（）は、カーソル（おそらく入力フィールドを選択した）がすべての選択アイテムのフォーカスを失うことを意味します。

または：

Css3要素を使用できます zoom （ Source ）

Firefoxでは許可されていません ブラウザでズームするのは、javascriptまたはsthを介してユーザープロパティにアクセスできないためです。

したがって、ズーム（CSS3：上記のズーム）またはテキストサイズを拡大できるCSSスタイルを使用できます。たとえば、別のCSSファイルを含めることでこれを行うことができます。しかし、ここでは、「ジャンプ」問題があります。スタイル設定されたcss要素（フロートなど）は、実際には属性の「相互作用」が異なるためです。

上記で投稿したズームは、ChromeおよびIE8 +で適切に機能します（FFは上記のようにサポートされていません）

- 追加情報：

ここ は、ズームオプションを使用して正確にズームする方法の例です。アプリケーションの例が見つかります ここ

ズームオプションは通常、ブラウザと同じようにズームを処理します。

しかし、これはまだすべてのものであり、Firefox、またはおそらくSafari＆Operaではサポートされていませんか？ chrome and IE動作します！

別の解決策は次のとおりです。メインのサイズを "em"に配置し、100％、110％（CSS全体）などのサイズを設定して回避します。そのため、CSSファイルが異なる可能性があり、％属性を置き換えるだけでよいのです。

まだ他の解決策があるとは思いません！ :(

21
creativeby

CSS変換を使用した私のソリューションは次のとおりです：scale（）およびJavaScript/jQuery：

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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 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>
3
Bogdanio

私はjqueryでこれを行い、Firefox、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 + '%');
    }
  });
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="button" id="Out" value="Zoom Out"/>
<input type="button" id="In" value="Zoom In"/>
1
Rafael González

transform: scale()を使用してみてください。 Mozilla Docs

_.className {
    transform: scale(0.9)
}
_

JavaScriptでスケール量を変更できます。

_let scaleAmount = 1 - 0.1
document.body.style.transform = `scale(${scaleAmount})`
_

scale()は、要素の幅と高さを増減します。幅を元のサイズのままにしたい場合、すべての内部要素はスケーリングされますが、アルゴリズムは次のようになります。

_let scaleAmount = 1 - 0.1
document.body.style.transform = `scale(${scaleAmount})`
document.body.style.width = `${100 * (1 / newScale)}%`
document.body.style['transform-Origin'] = `0 0`
_

ReactのようなUIフレームワークを使用する場合は、scaleAmountが状態に存在するときにCSSをインライン化して渡すことができます。

_<header className="App-header" style ={{
    transform: `scale(${scaleState})`,
    transformOrigin: '0 0',
    width: `${100 * (1 / scaleState)}%`
}}>
_

Reactの例

0
Edson A