FirefoxとOperaでHTML要素をズームするにはどうすればよいですか？
このzoomプロパティはIE、Google Chrome、Safariで機能しますが、FirefoxとOperaでは機能しません。
このプロパティをFirefoxとOperaに追加する方法はありますか？
回答:
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);
};
usege：
$(selector).scale(0.5);
注意：
クラスを持つラッパーを作成しますscaleContainer。コンテンツをスタイリングするときは、それに注意してください。
.width($(this).data('originalWidth') * x + borderWidth)
zoom: 145%;
-moz-transform: scale(1.45);
より安全にするためにこれを使用してください
すべてのブラウザで同じように機能するわけではありません。私はにに行ってきました：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimageとズームと-moz-変換のためのスタイルを追加しました。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>
私はこれをしばらくの間誓っています。ズームは間違いなく解決策ではありません。Chromeで動作し、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;
明らかに、これらを自分のニーズに合わせて変更してください。すべてのブラウザで同じ結果が得られました。
正しいW3C互換の答えは次のとおりです。 <html>オブジェクトとレムだけです。スケールダウンすると、変換が正しく機能しません（たとえば、scale（0.5））。
使用する：
html
{
font-size: 1mm; /* or your favorite unit */
}
コードでは、<body>メートル単位の代わりに「rem」単位（のスタイルを含む）を使用します。「％」は変更なし。すべての背景にbackground-sizeを設定します。他の要素に継承されるbodyのフォントサイズを定義します。
1.0以外のズームを起動する条件が発生した場合は、タグのフォントサイズを変更します（CSSまたはJSを介して）。
例えば：
@media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
これにより、clientXを使用したJSやドラッグアンドドロップイベント中の配置に問題なくzoom：0.5と同等になります。
メディアクエリで「rem」を使用しないでください。
ズームは実際には必要ありませんが、場合によっては、既存のサイトの方法を高速化できます。