JavaScript ›

IEの outerWidth, outerHeight の値を取る、でうまくリサイズ

JavaScriptで「ウィンドウを無理矢理リサイズ」なんてこと最近メッキリやらないので、IEでメニュー部分やスクロールバーを含んだウィンドウのサイズ、innerWidthとinnerHeightの値が取れないことなんて気にもしませんでした。

ちょっとヤボ用で必要になったので色々調べてみたら「 innerWidthとinnerHeightにあたるプロパティにスクロールバー幅とメニュー高っぽい適当な数値をそれぞれ足す」ってのが何年も前からの常套手段みたいです。そもそもresizeTo()自体が敬遠されるだろうから、いい対処法はあってもあまり広まってないのかなと思います。

とにかくこれでは、表示領域をきっかりサイズ指定するのはムズイということで、確立したやり方があるとは思ったんですが、以下のように自前しました。 

var newWidth = 640, newHeight = 480; // 変えたいサイズ
// IE
if (document.all) {
  // 前もって表示領域のサイズを取得
  var w = document.body.clientWidth,
      h = document.body.clientHeight;
  // で、いったんリサイズ
  window.resizeTo(w, h);
  // リサイズされた表示領域を再度取得して差分を出す
  var dW = w - document.body.clientWidth,
      dH = h - document.body.clientHeight;
  // 差分を足して本番リサイズ
  window.resizeTo(newWidth + dW, newHeight + dH);
}
// それ以外
else {
  window.resizeTo(newWidth, newHeight);
}
関連する記事