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

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

1.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>

2.読み込むJsファイルとJavaScritpの記述例

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>

3.HTMLの記述例

<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でページ全体を拡大・縮小表示したページデモ

ページをブラウザにフィットさせたい時に使えそうな気がします。

※流用される場合は自己責任でお願いします。