cssでの拡縮に困っていた、ユゲタです。
たまに、企業サイトを見ていると、ページ全体に対して、cssで"transform:scale(0.5)"や"zoom:0.5"という値がセットされていることがある。
一昔前に流行ったやり方なんですが、これがどういう意味なのかと言うと、
2倍の解像度であるRetinaディスプレイは144dpiの解像度なんですが、
このモニタに対応するために、2倍のサイズで作ったwebサイトを、ギュッと半分のサイズにスケールすると、Retinaディスプレイで、ちゃんとドット単位でキレイに見えるという意味があるようです。
個人的には、そんなに差があるように見えないし、なにより、apiシステムを導入した時に、ブラウザ画面の表示サイズと、実際の画面の座標が食い違ってくることがあり、
トラブルも多くなるため、あまりお勧めしたくないやり方なんですよね。
でも、たまに、拡縮処理が必要になる事があるので、使わざるを得ないんだけど、scaleとzoomのどちらを使えばいいか迷ってしまうため、
調査がてらブログに書いておくことにします。
表示テスト
次のようなソースを用意しました。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<h1>Scale vs Zoom</h1>
<div class="area">
<h2>Scale</h2>
<div class="scale">
<img src="9chat-e.jpg"><br>
<input type="text" name="" value="" placeholder="scale">
</div>
</div>
<div class="area">
<h2>Zoom</h2>
<div class="zoom">
<img src="9chat-e.jpg"><br>
<input type="text" name="" value="" placeholder="zoom">
</div>
</div>
</body>
</html>
.area{
border:1px solid red;
display:inline-block;
font-size:0;
vertical-align:top;
}
h2{
font-size:20px;
margin:5px 10px;
}
.scale{
transform:scale(0.5);
}
.zoom{
zoom:0.5;
}
input{
width:500px;
font-size:28px;
padding:20px;
margin-top:20px;
border:2px solid #ccc;
border-radius:8px;
}
transform:scaleの特性
結果表示を見て分かる通り、transform:scaleは、元のサイズを保持したまま、見え方だけ拡縮されます。
ただし、これは、marginにマイナス値を入れることで、周辺エレメントとの干渉は大丈夫になります。
今回の場合は、次のようにします。
.scale{
transform:scale(0.5);
margin:calc(413px / 4 * -1) calc(640px / 4 * -1);
}
すると、結果は、
ただし、%などでの指定がうまくできない場合があるので、javascriptをつかって、画像のnativeサイズを取得して、値を記述する必要があるので、その点めんどくさいかもしれませんね。
そして、元サイズ / 4と、1/2ではなく、1/4にしているのは、サイズが50%なので、その更に半分で25%という意味です。
zoomの特性
zoomはもともと、IEのみの専用機能だったのですが、webkitがそれを採用して標準機能に近くなりました。
扱いは非常に便利なのですが、残念なことに、firefoxに対応していません。
扱いやすく、scaleよりも手間が掛からないので、非常に使いやすいんですが、マルチブラウザ対応必須の場合は、使わないほうが良さそうですね。
まとめ
scaleは、拡縮した後での処理をちゃんとしないと、いけないという点がめんどくさいですが、
FF対応していないzoomを使うよりは、間違いがないでしょう。
よく考えたら、そのエリアと同じエレメント（例えばdiv）などで、1階層だけwrapしてあげて、サイズを整えてあげることで、できる限りの自動化はできるかもですね。
ネットで、このscale余白で苦労している人がたくさんいるのを知ったのですが、javascriptで対応するライブラリなどもあるようなので、
どうしても使わないと行けない場合に活用してみてはいかがでしょう？
今回の検証が、何かの役に経つことを願います。
0 件のコメント:
コメントを投稿