• Javascriptでウィンドウを縮小させる。(Firefox編)

    Javascriptと正確にはCSSを使って、ウィンドウをスクリプト側から縮小させる方法です。
    Firefoxは、IEやChromeにはある「zoom: 1.0;」のようなCSSがなく、独自に「.MozTransform=”scale(0.1)”;」があります。しかしこれ、ちょっとやっかいで縮小するとウィンドウが中央に配置されて、画面のまわりが余白だらけになってしまいます。これをどうにか左寄せしようと思います。

    そのまえに問題です

    xが0.1のとき
    13000
    
    xが0.2のとき
    5800
    
    xが0.5のとき
    1440Code language: CSS (css)

    このxの数式がなんなのか当ててみましょう。

    私は・・わかりませんでした・・・orz
    これはワイド画面のディスプレイでとあるページで画面の左上寄せに必要だった余白部分のサイズの数値です。

    しょうがないので、Firefoxの縮小の挙動を考えてみることにしました。

    ウィンドウの横の長さが980だったとしたら、それを0.8倍にしたら、784。
    つまり、もともとのウィンドウのサイズ980-784で196だけ小さくなった。
    この196というのは余白分。画面は中央に表示されているので、左と右の2つの幅ということになる。
    なので、これを2で割ると、その半分の余白のサイズが求められます。

    そしてらできた

    var htmlElm = document.getElementsByTagName("html")[0];
    htmlElm.style.MozTransform="scale(1)";
    var sx = document.body.clientWidth * 1.0;
    var sy = document.body.clientHeight * 1.0;
    var a = 0.5;
    htmlElm.style.position = "absolute";
    htmlElm.style.left = "-"+((sx-sx*a)/2.0)+"px";
    htmlElm.style.top = "-"+((sy-sy*a)/1.98)+"px";
    htmlElm.style.MozTransform="scale("+a+")";Code language: JavaScript (javascript)

    フレームページの場合はこうする。

    var sx = document.getElementById("iframe").contentDocument.body.scrollWidth * 1.0;
    var sy = document.getElementById("iframe").contentDocument.body.scrollHeight * 1.0;Code language: JavaScript (javascript)