JAVASCRIPT_[ 브라우저 별 확대/축소 ]

구지 일일이 설명을 다하기는 시간이 오래 걸릴듯, 다른거 할게 많아서... 소스를 첨부하니 이해하시길

<script type="text/javascript">
   
   var Browser = { a : navigator.userAgent.toLowerCase() }
   
   Browser = {
           ie : /*@cc_on true || @*/ false,
           ie6 : Browser.a.indexOf('msie 6') != -1,
           ie7 : Browser.a.indexOf('msie 7') != -1,
           ie8 : Browser.a.indexOf('msie 8') != -1,
           opera : !!window.opera,
           safari : Browser.a.indexOf('safari') != -1,
           safari3 : Browser.a.indexOf('applewebkit/5') != -1,
           mac : Browser.a.indexOf('mac') != -1,
           chrome : Browser.a.indexOf('chrome') != -1,
           firefox : Browser.a.indexOf('firefox') != -1
       }
   
   
   // 기본 Zoom
   var nowZoom = 100;
   // 최대 Zoom
   var maxZoom = 200;
   // 최소 Zoom
   var minZoom = 80;
   
   // 화면크기 확대
   var jsBrowseSizeUp = function() {
       
       if( Browser.chrome ) {
           if( nowZoom < maxZoom ) {
               nowZoom += 10; // 10 = 25%씩 증가
               document.body.style.zoom = nowZoom + "%";
           }
           else{
               alert('최대 확대입니다.');
           }
       }
       else if( Browser.opera ) {
           alert('오페라는 화면크기 기능을 지원하지 않습니다.\n브라우저 내의 확대/축소 기능을 이용하시기 바랍니다.');
       }
       else if( Browser.safari || Browser.safari3 || Browser.mac ) {
           alert('사파리, 맥은 화면크기 기능을 지원하지 않습니다.\n브라우저 내의 확대/축소 기능을 이용하시기 바랍니다.');
       }
       else if( Browser.firefox ) {
           alert('파이어폭스는 화면크기 기능을 지원하지 않습니다.\n브라우저 내의 확대/축소 기능을 이용하시기 바랍니다.');
       }
       else {
           if( nowZoom < maxZoom ) {
               nowZoom += 10; //10 = 25%씩 증가
               document.body.style.position = "relative";
               document.body.style.zoom = nowZoom + "%";
           }
           else{
               alert('최대 확대입니다.');
           }
       }
   };
   
   // 화면크기 축소
   var jsBrowseSizeDown = function() {
       
       if( Browser.chrome ) {
           if( nowZoom < maxZoom ) {
               nowZoom -= 10; // 10 = 25%씩 증가
               document.body.style.zoom = nowZoom + "%";
           }
           else{
               alert('최대 확대입니다.');
           }
       }
       else if( Browser.opera ) {
           alert('오페라는 화면크기 기능을 지원하지 않습니다.\n브라우저 내의 확대/축소 기능을 이용하시기 바랍니다.');
       }
       else if( Browser.safari || Browser.safari3 || Browser.mac  ) {
           alert('사파리, 맥은 화면크기 기능을 지원하지 않습니다.\n브라우저 내의 확대/축소 기능을 이용하시기 바랍니다.');
       }
       else if( Browser.firefox ) {
           alert('파이어폭스는 화면크기 기능을 지원하지 않습니다.\n브라우저 내의 확대/축소 기능을 이용하시기 바랍니다.');
       }
       else {
           if( nowZoom < maxZoom ) {
               nowZoom -= 10; //10 = 25%씩 증가
               document.body.style.position = "relative";
               document.body.style.zoom = nowZoom + "%";
           }
           else{
               alert('최대 확대입니다.');
           }
       }
   };

   // 화면크기 원래대로(100%)
   var jsBrowseSizeDefault = function() {
       
       nowZoom = 100;
       document.body.style.zoom = nowZoom + "%";
   };

</script>

화면 조정을 하고자하는 곳에

확대 onclick="jsBrowseSizeUp()"

축소 onclick="jsBrowseSizeDown();" 

기본 onclick="jsBrowseSizeDefault();" 이벤트룰 주면 완성!

사파리 & 파이어폭스 & 오페라는 위의 기능으로 불가능

구글링 결과 css transform 을 이용하면 가능하다고 하는데... 현재 개발중인 프로젝트 메뉴가 이미지로 구성이 많이 되어 있어서 transform 으로 확대를 하면 화면깨짐 현상이 나타나서 결국엔 위의 스크립트와 같이 기능지원을 하지 않았다.

나중에 시간날때  css transform 공부좀 하자..^_^

참고한 사이트 : http://angeleyes.tistory.com/259#.Uh6Zsz9mKLI  (css Transform)