ズームとトランスフォームの違い:scale()_html/css_WEB-ITnose

zoom と transform:scale() はどちらもズームに使用できます。現在、モバイル側ではさまざまな画面サイズを持つさまざまな幅の画面に対応することができます。特定の画面幅（iPhone5 320など、これはデザイン案に基づいています） ページを作成した後、ページは他の画面幅と互換性があるように拡大縮小されます。

定義

zoomとtransform:scale()の具体的な違いは何ですか?まずは公式の定義を見てみましょう:

ウィンドウまたは表示領域の初期ズーム倍率を指定します。これは、虫眼鏡タイプのズーム倍率であり、初期ズーム倍率から対話的に変更しても、ウィンドウのサイズには影響しません。初期または実際のビューポート。

zoom は虫眼鏡に相当します。ズーム要素をズームしても、初期または実際のビューポートのサイズには影響しません。
ズームの値は数値またはパーセンテージ値にすることができ、負の値にすることはできません。

変換は、transform プロパティを通じて要素がレンダリングする座標系に適用されます。このプロパティには、変換関数のリストが含まれており、リスト内の各関数を対応する行列に変換することによって取得されます。変換関数の数学的説明で定義され、行列を乗算します。

まず、transform の定義を見てみましょう。transform の変換プロセスは、実際には、変換された要素です。一連の行列演算により、最終的にその座標が決定されます。

transform プロパティの値は、transform-function のリストです。2 つのパラメーターで記述された [sx,sy] スケーリング ベクトルによる 2D スケール操作を指定します。2 番目のパラメーターが指定されていない場合は、値を受け取ります。

scale() はスケーリング関数であるtransformの属性値です。要素がtransform:scale(x,y)で定義されている場合、パラメータが1つしかない場合、2番目のパラメータは最初のパラメータと等しくなります。
スケールの値は数値のみですが、負の数も可能です。

実用的なアプリケーション

まず簡単なデモを見てみましょう

互換性の問題

このデモから、ズーム ズームは左上隅を基準にし、スケールは中心点を基準にしてスケールされることがわかります。デフォルトで Scale 要素を渡すことができます。transform-origin を設定すると、transform-origin: 0 0 を設定すると、ズーム スケーリングと同様の結果が得られます。
前述したように、ズームはさまざまな幅のモバイル画面の適応に適用できるため、画面適応におけるズーム ズームとスケール ズームの具体的な違いを見てみましょう。次の図は左から右に、iPhone5 のズームなしのパフォーマンス、iPhone6 のzoom:1.17 のパフォーマンス、iPhone6 のtransform:scale(1.17) のパフォーマンスです。

コードは次のとおりです:
HTML

<div class="container">    <div class="box red"></div>    <div class="box blue"></div>    <div class="box red"></div></div>

CSS

html,body {height: 100%;}.container {height: 100%;}.box {height: 160px; font-size: 20px; text-align: center;}.red {background-color: rgba(255,0,0,.5);}.blue {background-color: rgba(0,0,255,.5);}

外側のコンテナの幅と高さは 100% で、画面全体を占めます。定義によれば、ズームは画面全体を占めるボディの下のコンテナーに対して機能するため、ここでズームを使用すると、実際には画面全体 (つまり、ビューポート) がズームインされるのと同じであると言えます。ブラウザのページでも効果は同じです:

では、なぜスケールにはスクロール バーがあるのでしょうか?変換の定義によれば、変換の変換プロセスは座標系に基づいています。つまり、スケーリング前の外側コンテナの四隅の座標は (0,0)、(100%,0)、 (0,100%)、(100%,100%)、(0,0)を変換中心としてスケーリングすると、四隅の座標は(0,0)、(117%,0)、(117%、 0)、( 117%、117%) はビューポート自体のサイズを超えるため、スクロール バーが表示されます。
対応している場合はzoomを使うと良いようです！私も最初はそう思っていましたが、同僚からのアドバイスの後、スケールの問題には解決策があることがわかりました。それは、外側のコンテナ、つまりスケールする要素に固定の幅と高さを設定することです。パーセンテージではなく、絶対値であることに注意してください。例えば、iPhone5の画面サイズに合わせてデザイン案を作成した場合、外側のコンテナを幅：320px; 高さ：504px; に設定すると、スケール使用時にスクロールバーが表示されなくなります。もちろん、ズームを使用しても同じ効果があります。

レンダリング

上記のデモからも、ズームされた要素の幅と高さは、js で取得したときにスケーリング前の元の幅と高さのままであることがわかります。ただし、要素を検査するときに、ズームとスケールの間にはまだ違いがあります。 :

ズームも デモでは、要素の幅が明示的に設定されていない場合 (つまり、デフォルトは 100%)、またはズームを使用して幅を縮小した後にパーセンテージに設定されている場合、少し奇妙なことが 1 つあります。要素の幅は実際には以前よりも大きくなっています。大きい！わかった！拡大すると元より幅が狭くなります！小さい！
つまり、ズーム後の要素の幅と高さを取得したい場合は、ズームを使用する方が面倒なようです。スケールは、js で取得した幅と高さ * スケーリング倍数がスケーリング後の要素の実際の幅と高さである限り、比較的単純です。
さらに、ズームはパフォーマンスに優しくなく、ドキュメント フロー内の要素にズームを追加すると、ページ全体が再レンダリングされます。最初のデモから、ズームされた要素の親要素の高さが明らかに小さくなっていることがわかります。スケールは現在の要素のみを再描画し、他の要素には影響しません。

その他

スケーリングされる要素の幅と高さがレム単位である場合、レム単位ではないテキスト要素や子要素を除き、その要素に対するズームは無効になり、スケーリングは通常どおりに動作します。ここでデモをご覧ください

したがって、ズームとスケールのどちらを使用するかは、特定の状況によって異なります。

初めて記事を書くので才能も知識も乏しいので、間違いや漏れがあればご指摘ください。