IE限定
js
function cz(){
if (screen.deviceXDPI !=96) {
var dxd=screen.deviceXDPI;
var nowMagniFication=dxd/96;
var chgZoom=1/nowMagniFication;
document.body.style.zoom=chgZoom;
document.body.style.width=document.body.clientWidth*nowMagniFication+"px";
document.getElementById("result1").innerHTML=dxd;
document.getElementById("result2").innerHTML=nowMagniFication;
document.getElementById("result3").innerHTML=chgZoom;
document.getElementById("result4").innerHTML=document.body.clientWidth;
}
}
window.onload=cz;
css
body{
padding:0;
margin:0;
overflow-x:hidden;
}
IEは screen.deviceXDPIでブラウザの拡大縮小倍率ぽいのがわかる、基準は96。
例えば400%に表示を拡大するとscreen.deviceXDPIの値は384。
それを100%に戻したかったら、zoomプロパティを1/4すれば良さそう。
ただ、それだけをすると(やってみたらよく分かるけど)拡大した時のbodyのwidthで文字が折り返され、zoomで縮小しても改行の位置はかわらない。
なのでbody.clientWidthを(400%なら4倍)拡大させてみた。
そうすると今度は横に空白が出来るので、bodyにoverflow-x:hidden;を指定して横スクロールバーを削除
縦のスクロールバーが伸びたままなのよね…
このページは乱雑モックアップのサンプルページです。
間違い等発見された方は、ぜひお知らせください。