ピンタレスト風グリッドjs｢Blocksit.js｣のスマホ対応について

現在、PCとスマホ向けのソーシャルサービスを企画しており、インターフェースとして、ピンタレスト風グリッドjs｢Blocksit.js｣の使用を予定しておりました。

実際にサーバに実装し、テストを行ったのですが、どうしてもスマホで閲覧した場合、PCと同じ表現をしてしまいます。

ただし、画面を横にしたりすると、その幅に合わせて調整され最適化されます。

恐らく、初期の画面表示において、スマホの画面幅の取得に失敗しているのが原因だと思い、metaでviewport等の指定をやってみましたが、どうにもうまくいきません。

どなたか、解決方法がわかる方がいらっしゃれば、ご教授頂きます様、お願い申し上げます。

以下が、現状のソースコードとなります。

<?php

$dirName = './images/';
$Out_Put_Grid_Data = "";
if ($dir = opendir($dirName))
{
    while (($file = readdir($dir)) !== false) {
        if ($file != "." && $file != "..") {

	$Out_Put_Grid_Data .= "<div class='grid'><div class='imgholder'><a href='http://XXXXXXXXXXXXX/images/".$file."' target='_blank'><img src='http://XXXXXXXXXXXXX/images/".$file."' /></div><strong>イメージのタイトル</strong><p>写真コメントの先頭切り出し...</p><div class='meta'>投稿者名</div></div>";
	
        }

    } 
    closedir($dir);
}

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>smartPin!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel='stylesheet' href='./css/style.css' media='screen' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="./js/blocksit.min.js"></script>
<script>
$(document).ready(function() {
	//vendor script
	$('#header')
	.css({ 'top':-50 })
	.delay(1000)
	.animate({'top': 0}, 800);
	
	$('#footer')
	.css({ 'bottom':-15 })
	.delay(1000)
	.animate({'bottom': 0}, 800);
	
	//blocksit define
	$(window).load( function() {
		$('#container').BlocksIt({
			numOfCol: 5,
			offsetX: 8,
			offsetY: 8
		});
	});

	//window resize
	var currentWidth = 1100;

	$(window).resize(function() {
		var winWidth = $(window).width();
		var conWidth;
		if(winWidth < 660) {
			conWidth = 440;
			col = 2
		} else if(winWidth < 880) {
			conWidth = 660;
			col = 3
		} else if(winWidth < 1100) {
			conWidth = 880;
			col = 4;
		} else {
			conWidth = 1100;
			col = 5;
		}
		
		if(conWidth != currentWidth) {
			currentWidth = conWidth;
			$('#container').width(conWidth);
			$('#container').BlocksIt({
				numOfCol: col,
				offsetX: 8,
				offsetY: 8
			});
		}
	});
});
</script>


</head>
<body>
<center>
<h1>smartPin!</h1>
XXXXXXXXXXXXX
<hr>
<form action="post.php" enctype="multipart/form-data" method="post">
<input type="hidden" name="vcode" value="" />
<input type="hidden" name="resize" value="0" />
<strong>画像ファイル</strong><br><input type="file" name="photo" accept="image/*; capture=camera"><br>
<br>
<input type="submit" value="アップロード！">
</form>
</center>
<hr>


<!-- Content -->
<section id="wrapper">

<div id="container">

<?= $Out_Put_Grid_Data ?>

</div>
</section>

<!-- Footer -->
<footer id="footer">
	<span>&copy; Copyright XXXXXXXXXXXXX</span>
</footer>

</body>
</html>