jQueryの.cssとzoomでページ全体を拡大・縮小表示してみる

jQueryでやる必要もないかもしれませんが、jQueryの.cssとzoomを使ってページ全体を拡大・縮小させてみます。

zoomさせるためのクリックボタンのCSSの記述

※zoom表示させるためのボタンのcss記述です。必要に応じて変更して下さい。

<style type="text/css">
<!--
.cWrap{
	width:800px;
	height:800px;
	margin:0 auto;
	border:solid 3px #333;
}
.clBtn{
	width:120px;
	height:35px;
	background-color:#333;
	color:#fff;
	font-weight:bold;
	margin:20px auto;
	line-height:2.2em;
	cursor:pointer;
}
.clBtn:hover{
	width:120px;
	height:35px;
	background-color:#666;
	color:#fff;
	font-weight:bold;
	margin:20px auto;
	line-height:2.2em;
	cursor:pointer;
}
-->
</style>

.cssを使って、25％～200％倍で拡大・縮小表示するJavaScritpの記述

※各ボタンをクリックするとjQueryのcssでzoomを25％、50％、100％、150％、200％で拡大・縮小します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(window).load(function(){
	$('#ick25').click(function() {
		$("body").css("zoom","25%");
	});
	$('#ick50').click(function() {
		$("body").css("zoom","50%");
	});
	$('#ick100').click(function() {
		$("body").css("zoom","100%");
	});
	$('#ick150').click(function() {
		$("body").css("zoom","150%");
	});
	$('#ick200').click(function() {
		$("body").css("zoom","200%");
	});
});
// -->
</script>

zoom表示ボタンのHTMLの記述

※25％、50％、100％、150％、200％のボタンを用意しました。必要に応じて変更して下さい。

<div class="cWrap">


<h1>ページ全体を以下の倍数に拡大・縮小します。</h1>



<div id="ick25" class="clBtn">0.25倍</div>


<div id="ick50" class="clBtn">0.5倍</div>


<div id="ick100" class="clBtn">1倍</div>


<div id="ick150" class="clBtn">1.5倍</div>


<div id="ick200" class="clBtn">2倍</div>


</div>
<!--/cWrap-->

jQueryの.cssとzoomでページ全体を拡大・縮小表示したページデモ

jQueryの.cssとzoomでページ全体を拡大・縮小表示したページデモ

ページをブラウザにフィットさせたい時に使えそうですね。これをレスポンシブサイトで使うとどうなるのか今度やってみます。

　
※ブラウザの種類（FireFox等）によってはcssのzoomは効かないものがあります。
別の方法としてCSSのtransform:scaleを使ったタグ要素を拡大・縮小させた方法は以下になります。
「【transform:scale】タグ要素を2次元（x,y）または3次元（x,y,z）に拡大・縮小表示する方法」

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。