最近の制作で、ブラウザの拡大縮小の際に表示が若干崩れる問題に遭遇しました。
具体的には、ボックスの中のテキストが標準サイズでは1行で表示されていたものが、拡大または縮小した時に1文字だけ改行されてしまうという状態です。
元々、制作の際にあまり細かくは拡大縮小まで対象にしていなかったこともあり、今まではあまり考えていない部分だったので、一苦労。
というわけで、その時の対処方法をご紹介いたします。
拡大縮小による崩れはブラウザにより
拡大縮小の際に表示が崩れるのは、ボックスの幅を固定し、尚且つ標準サイズでテキストがボックス幅ギリギリという場合に起こっていました。
テキストとボックスの関係
恐らくブラウザの小数点以下の扱いやフォントの違いにより、拡大縮小した際に1ピクセルのズレにより、ボックスにテキストが入りきらず1文字だけ改行という状況だと思われます。
特にFirefoxでその現象が顕著にみられました。もちろん拡大率によって他のブラウザでも発生します。
onResizeはイマイチ
ボックスの幅を可変には出来なかったため、この対策として拡大縮小の際に幅を『transform』の『scaleX』で変換するということを行いました。
当初以下のようにonResizeを使おうと思っていたのですが、DTDの宣言によって正常に動作しなかったりします。特にIE7など・・・。
<body onresize="Resize()">
ちなみに正常に動作させるには以下の宣言をします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
jQueryのresizeを使って対処
というわけで、jQueryのresizeを使用。
$(window).resize( function() {
// この部分で縮小率ratioを算出
$(".box").css("transform":"scaleX(" + ratio + ")");
});実際のコードではベンダープレフィックスをつけたりなんだりいろいろしています。
IE7やIE8においてはtransformは使えないので、以下のようにfilterを使ったりもしました。
$(".box").css("filter":'"progid:DXImageTransform.Microsoft.Chroma(color=\'white\') progid:DXImageTransform.Microsoft.Matrix(Enabled=1,M11=' + ratio + ',M22=1)"');私が確認したOSやブラウザでは、ここまでやってようやく問題のない動作をするようになりました。
まとめ
IE7でも前述したonResizeで可能ではありますが、若干不安を抱えています。なので、やはりjQueryのresizeが良いのではないかと思います。
他にもボックスの幅や高さを求めたい場合など、jQueryを使うべき時が多いですね。（当然といえば当然ですが。）
その件はまたいずれ書こうかなと思います。
