127

ブラウザのズーム レベル (+) (-) を変更する 2 つのボタンをサイトに作成する必要があります。画像サイズとレイアウトの問題のため、css ズームではなくブラウザー ズームを要求しています。

さて、これは可能ですか？相反する報告を聞いたことがあります。

4

10 に答える 10

59

Firefox では機能しませんが、IE と chrome では可能です。

<script>
   function toggleZoomScreen() {
       document.body.style.zoom = "80%";
   } 
</script>

<img src="example.jpg" alt="example" onclick="toggleZoomScreen()">
于 2012-12-12T13:10:18.407 に答える
50

少なくとも追加のプラグインがなければ、ほとんどのブラウザーでは不可能だと思います。いずれにせよ、実装が異なるため、ブラウザーのズームに依存しないようにします (一部のブラウザーはフォントのみをズームし、他のブラウザーは画像もズームします)。ユーザーエクスペリエンスをあまり気にしない限り。

より信頼性の高いズームが必要な場合は、JavaScript と CSS を使用して、またはサーバー側でページのフォントと画像をズームすることを検討してください。画像とレイアウトのスケーリングの問題は、この方法で対処できます。もちろん、これにはもう少し作業が必要です。

于 2009-06-28T17:48:00.237 に答える
32

これがうまくいくかどうか試してください。これは、FF、IE8+、およびクロムで動作します。else 部分は、Firefox 以外のブラウザーに適用されます。これによりズーム効果が得られますが、ブラウザ レベルでズーム値が実際に変更されるわけではありません。

    var currFFZoom = 1;
    var currIEZoom = 100;

    $('#plusBtn').on('click',function(){
        if ($.browser.mozilla){
            var step = 0.02;
            currFFZoom += step; 
            $('body').css('MozTransform','scale(' + currFFZoom + ')');
        } else {
            var step = 2;
            currIEZoom += step;
            $('body').css('zoom', ' ' + currIEZoom + '%');
        }
    });

    $('#minusBtn').on('click',function(){
        if ($.browser.mozilla){
            var step = 0.02;
            currFFZoom -= step;                 
            $('body').css('MozTransform','scale(' + currFFZoom + ')');

        } else {
            var step = 2;
            currIEZoom -= step;
            $('body').css('zoom', ' ' + currIEZoom + '%');
        }
    });
于 2012-09-26T13:47:53.757 に答える
13

CSS3のズーム機能が使えますが、jQueryではまだテストしていません。今すぐ試してお知らせします。更新：テストして動作しますが、楽しいです

于 2011-12-12T19:20:06.463 に答える
1

ステータス バーの UI ズーム ボタンはスクリプト化できないため、IE では使用できません。他のブラウザの場合は YMMV。

于 2009-06-28T17:43:11.927 に答える
0 

<html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
        var currFFZoom = 1;
        var currIEZoom = 100;

        function plus(){
            //alert('sad');
                var step = 0.02;
                currFFZoom += step;
                $('body').css('MozTransform','scale(' + currFFZoom + ')');
                var stepie = 2;
                currIEZoom += stepie;
                $('body').css('zoom', ' ' + currIEZoom + '%');

        };
        function minus(){
            //alert('sad');
                var step = 0.02;
                currFFZoom -= step;
                $('body').css('MozTransform','scale(' + currFFZoom + ')');
                var stepie = 2;
                currIEZoom -= stepie;
                $('body').css('zoom', ' ' + currIEZoom + '%');
        };
    </script>
    </head>
<body>
<!--zoom controls-->
                        <a id="minusBtn" onclick="minus()">------</a>
                        <a id="plusBtn" onclick="plus()">++++++</a>
  </body>
</html>

Firefoxでは、ズームは変更されず、スケールのみが変更されます!!!

于 2015-03-28T06:44:22.890 に答える