[JS]ブラウザの幅に合わせてレイアウトを最適化するスクリプト -Dynamic Layout

Dynamic Layoutは、ユーザーのブラウザの幅を認識し、それに適したスタイルシートでページのレイアウトを最適化するスクリプトです。

Dynamic Layoutの設置方法は、body直下に外部ファイルとして指定します。

<body>
<script src="http://static.fortes.com/projects/dynamiclayout/dynamiclayout-1.0.min.js" type="text/javascript"></script>

調整するページの幅は、いくつか想定する必要があり、スクリプト・スタイルシートに設定を行います。

スクリプトには、外部ファイルとして記述した箇所に下記のように設定します。
例：ブラウザ幅800, 1000, 1200の場合

<script src="http://static.fortes.com/projects/dynamiclayout/dynamiclayout-1.0.min.js?sizes=800,1000,1200" type="text/javascript"></script>

スタイルシートには、そのブラウザの幅用のスタイルを設定します。
例：ブラウザ幅800は「.bw-800」、ブラウザ幅1000は「.bw-1000」を使用

.bw-800 #content{
	width:800px;
}
.bw-1000 #content{
	width:1000px;
}
.bw-1200 #content{
	width:1200px;
}

Dynamic LayoutはMITライセンスで、対応ブラウザはIE6, 7, Fx2, 3, Op9.5, Safari3.1となっています。

Post on:2008年7月17日