Programming Log

문제(Problem): 브라우저의 화면을 확대 및 축소 시 document.width 의 축소된 상대값을 가져올 수 없다. (document.width is not relative value document.width when Browser magnification) 방법(way): document.documentElement.offsetWidth 예(Example): 브라우져의 화면을 확대하거나 축소한 후 가로 길이를 동적으로 움직여 보세요. (browser magnification and adjust browser width) document.width  => absolute value 0px document.documentElement.offsetWidth  => relative value 0px

<script> var scale = 1; function scaleIn() { scale *= 1.25; zoom(scale); } function scaleOut() { scale /= 1.25; zoom(scale); } function zoom(scale) { var body = document.body; body.style.zoom = scale; // IE body.style.webkitTransform = 'scale('+scale+')'; // Webkit(chrome) body.style.webkitTransformOrigin = '0 0'; body.style.mozTransform = 'scale('+scale+')'; // Mozilla(firefox) body.style.mozTransformOrigin = '0 0'; body.style.oTransform = 'scale('+scale+')'; // Opera body.style.oTransformOrigin = '0 0'; } </script> <div onclick="scaleIn();"> Zoom In(*1.25)</div> / <div onclick="scaleOut();"> Zoom Out(/1.25)</div> Example (click!!) Zoom In(*1.25) / Zoom Out(/1.25) 참고:  http://angeleyes.tistory.com/259