web-dev-qa-db-ja.com

FirefoxおよびOperaでHTML要素をズームするにはどうすればよいですか？

FirefoxおよびOperaでHTML要素をズームするにはどうすればよいですか？

zoomプロパティはIE、Google Chrome、およびSafariで機能していますが、FirefoxおよびOperaでは機能していません。

このプロパティをFirefoxおよびOperaに追加する方法はありますか？

cssfirefoxcross-browserzoomopera
77
SABU

このコードを試してください、これは動作します：

-moz-transform: scale(2);

this を参照できます。

75
Mubeen

ズームと変換スケールは同じものではありません。それらは異なる時間に適用されます。ズームはレンダリングが行われる前に適用され、変換-後に適用されます。この結果は、幅/高さ= 100％のdivを固定サイズで別のdivの内側にネストした場合、ズームを適用すると、内側のズーム内のすべてが縮小または拡大しますが、全体を変換すると内側のdivは縮小します（幅/高さが100％に設定されていても、変換後に100％になることはありません）。

49
Ilya Volodin

私にとってこれは、ズームとスケール変換の違いに対抗するために機能し、目的のOriginに合わせて調整します：

zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-Origin: left center;
34
Russ K.

代わりにscaleを使用してください！多くの調査とテストを行った後、私はこのプラグインを作成してクロスブラウザを実現しました：

$.fn.scale = function(x) {
    if(!$(this).filter(':visible').length && x!=1)return $(this);
    if(!$(this).parent().hasClass('scaleContainer')){
        $(this).wrap($('<div class="scaleContainer">').css('position','relative'));
        $(this).data({
            'originalWidth':$(this).width(),
            'originalHeight':$(this).height()});
    }
    $(this).css({
        'transform': 'scale('+x+')',
        '-ms-transform': 'scale('+x+')',
        '-moz-transform': 'scale('+x+')',
        '-webkit-transform': 'scale('+x+')',
        'transform-Origin': 'right bottom',
        '-ms-transform-Origin': 'right bottom',
        '-moz-transform-Origin': 'right bottom',
        '-webkit-transform-Origin': 'right bottom',
        'position': 'absolute',
        'bottom': '0',
        'right': '0',
    });
    if(x==1)
        $(this).unwrap().css('position','static');else
            $(this).parent()
                .width($(this).data('originalWidth')*x)
                .height($(this).data('originalHeight')*x);
    return $(this);
};

使用法：

$(selector).scale(0.5);

注意：

クラスscaleContainerでラッパーを作成します。コンテンツをスタイリングしながら、その点に注意してください。

8
user669677
zoom: 145%;
-moz-transform: scale(1.45);

これを使用してより安全な側に

4
Divam Gupta

zoomをtransformに変更するのは、すべての場合において、他の回答で説明されているように、それらが同等ではないためです。私の場合、transform-Originプロパティを適用して、必要なアイテムを配置する必要もありました。

これはChome、Safari、Firefoxで私のために働いた：

transform: scale(0.4);
transform-Origin: top left;
-moz-transform: scale(0.4);
-moz-transform-Origin: top left;
4
Alvaro

fireFoxでページ全体をズームするには、このコードを試してください

-moz-transform: scale(2);

このコードを使用している場合、yおよびxスクロールでスケーリングされたページ全体が適切にズームされません

so Sorry to say fireFox not working well using "-moz-transform: scale(2);"

**

FireFoxのCSSを使用してページをズームすることはできません

**

1
Rizo

すべてのブラウザで均一に機能するわけではありません。 http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage に行き、ズームと-moz-transformのスタイルを追加しました。 firefoxでIEとchromeで同じコードを実行すると、3つの異なる結果が得られました。

<html>
<style>
body{zoom:3;-moz-transform: scale(3);}
</style>
<body>

<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock"  />

</body>
</html>
1
Ronny Sherer

正解およびW3C互換の回答のみ：<html> objectおよびrem。縮小すると、変換が正しく機能しません（たとえば、scale（0.5）。

つかいます：

html
{
   font-size: 1mm; /* or your favorite unit */
}

コードの代わりに、メトリック単位の代わりに「rem」単位（<body>のスタイルを含む）を使用します。変更なしの「％」。すべての背景にbackground-sizeを設定します。 bodyのfont-sizeを定義します。これは他の要素によって継承されます。

1.0以外のズームを起動する条件が発生した場合、タグのフォントサイズを変更します（CSSまたはJSを使用）。

例えば：

@media screen and (max-width:320pt)
{
   html
   {
      font-size: 0.5mm; 
   }
}

これにより、zoom：0.5と同等になり、clientXを使用するJSで問題が発生せず、ドラッグアンドドロップイベント中に配置されます。

メディアクエリで「rem」を使用しないでください。

ズームは本当に必要ありませんが、場合によっては、既存のサイトをより高速に処理できます。

0
18C

これはあなたのために正しく機能しますか？ ：

zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);
0
T.Todua

私はしばらくこれを誓っていました。ズームは間違いなくソリューションではなく、クロムで動作し、IEで部分的に動作しますが、html div全体を移動しますが、firefoxは何もしません。

私のために働いた私の解決策は、スケーリングと翻訳の両方を使用し、元の高さと重量を追加してから、div自体の高さと重量を設定することでした：

#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-Origin: 1010px 1429px 0px;
width: 337px;
height: 476px;

これらを自分のニーズに合わせて変更してください。すべてのブラウザで同じ結果が得られました。

0
WtFudgE

私にとって、これはIE10、Chrome、Firefox、Safariでうまく機能します。

   #MyDiv>*
   {
        zoom: 50%;
        -moz-transform: scale(0.5);
        -webkit-transform: scale(1.0);
   }

これにより、すべてのコンテンツが50％に拡大されます。

0
Stone