본문 바로가기

Developer

CSS Cross Browser Zoom In/Out(웹 브라우저 줌인/줌아웃)

 

Zoom 이라는 속성이 있습니다.

값은 normal, number(scale), percentage를 받으며 적용은 아래와 같습니다.

 

body {
	/* default : normal, 1.0, 100% */
	zoom:1.25;		/* number(scale) */
	/*zoom:125%;	percentage */
}

script의 경우는 아래와 같습니다.

$(document).ready(function() {
	//document.body.style.zoom = 1.00;
	//document.body.style.zoom = "100%";
	document.body.style.zoom = "normal";
});

 

적용은 간단합니다..

이것은 IE 전용입니다. (하지만 Chrome, Safari4+ 에서도 됩니다.)

 

MSDN 참고하려면 여기를 클릭하세요.

 

CSS3의 Transform을 이용하여, Firefox, Opera도 지원 가능합니다.

 

코드는 아래와 같습니다.

body {
	-webkit-transform:scale(1.50);
	-webkit-transform-origin:0 0;
	-moz-transform:scale(1.50);
	-moz-transform-origin:0 0;
	-o-transform:scale(1.50);
	-o-transform-origin:0 0;
}

 

$('body').css('-webkit-transform','scale(' + (size) + ')');
$('body').css('-webkit-transform-origin','0 0');
$('body').css('-moz-transform','scale(' + (size) + ')');
$('body').css('-moz-transform-origin','0 0');
$('body').css('-o-transform','scale(' + (size) + ')');
$('body').css('-o-transform-origin','0 0');

 

아래는 적용 화면 입니다.

 

 

코드에서 -webkit-, -moz-, -o-에 대한 설명입니다.

  • webkit : 크롬, 사파리(web kit 기반)
  • moz : 파이어폭스
  • o : 오페라

 

에 해당하는 핵이라고 보시면 될 듯 합니다.

지원 버전은 FF 3.5+, Safari 4+, Opera 10.0+ 입니다.

 

transform 의 속성은 더 많은 값들을 가지고 있습니다.

아래 참고 사이트에서 확인하시기 바랍니다.

 

참고 사이트

http://www.w3.org/TR/css3-2d-transforms/

https://developer.mozilla.org/en/CSS/-moz-transform

http://css3.bradshawenterprises.com/#how2transitions

 

 소스 파일 :





감사합니다.