PHPで画面サイズを判断して分岐したかったので、Jsで取得した画面の横幅を、sessionに入れてみた。
- Date：
- Category：PHP, Javascript
- Tags：jQuery, Javascript, PHP
- Response：Comments 0
-
HTMLが読み込まれる前に、画面サイズによって、要素にclassを付けたり付けなかったりしたかったので、どうにか出来ないか考えて見ました。
<input type=”hidden”>は使いたくなかったので、別の方法で試行錯誤してますが、言ってしまえばAjaxを使っているだけです。
サンプルコード
▼ JsはjQueryを使ってます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(document).ready(function(){ var setWindowSize = function () { $.ajax({ type: "POST", url: "windowSize.php", // 画面サイズを渡すPHPのURL data: "windowSize=" + $(window).width() }); };setWindowSize(); // リサイズした時にsessionを更新する為 var timer; $(window).resize(function() { if (timer) clearTimeout(timer); timer = setTimeout(setWindowSize, 1000); }); }); |
▼ 上記Jsの「画面サイズを渡すPHP」の中身
|
1 2 3 4 5 6 7 |
<?php session_start(); if (isset($_POST['windowSize'])){ $_SESSION['windowSize'] = $_POST['windowSize']; } ?> |
簡単な解説
Js部分の説明
Js部分は「windowSize.php」といういファイルに、「$(window).width()」で取得した画面横のサイズをPOSTしています。
また、ウィンドウサイズが変わった時に、session内のサイズを更新したいので、その場合の処理も入れています。
PHP部分の説明
凄くシンプルに、POSTされて来た画面サイズを「$_SESSION[‘windowSize’]」に入れているだけです。
後は、この「session」を使って、HTMLが読み込まれる前にPHP側で画面サイズを擬似的に判断出来るようになります。
注意点
- 最初の1ページ目には無力。
- タイミングによっては横幅が正確ではない。
（例えば、非同期通信中にウィンドウサイズを変更して、すぐページ遷移した時）
注意点1個目は、こればかりは仕方ないような気がするので、HTMLが読み込み終わったタイミングで、Jsで対処するしかないですね。。。
注意点2個目は、これも、実際レアケースなのでとりあえず無視でｗ
注意点1個目の対処方でお茶を濁すということで。。。
チラシの裏
注意点で上げたように100%完璧には行きませんが、<input type=”hidden”>を使わない方法ではコレが一番しっくり来ています。
<input type=”hidden”>を使っても、注意点1個目は同じだし、注意点2個めが多少マシになる程度ですよね^^;
それよりも、HTMLが汚くなるのが嫌なので、やっぱりこの方法に落ち着きます。
他にもっと良い方法が見つかったり、また別記事で投稿します。
もしくは、良い方法がありましたら教えて頂きたいです。
コメントを残す