JSとPHPで "バックエンドのメディアクエリ"を行う方法はありますか？

Question

私が取り組んでいるプロジェクトは、内容を示すグリッドで構成されています。グリッド上の各アイテムのサイズを、ビューポートのサイズの4分の1に変更したいと思います。これはJavascriptでは非常に簡単ですが、各アイテムのサイズを認識する必要のあるバックエンドのものがいくつかあります：

Timthumbを使用して、アイテムのイメージを適切なサイズにサイズ変更しています。ビューポートの幅を検出し、適切な値（ビューポートの幅/ 4）を各項目を扱うphpに送信して、Timthumbに使用する適切なサイズを通知します。

この問題を解決するにはどうすればよいでしょうか？

Answer 1

$（document）.readyでページをリクエストすると、jQueryを使用してビューポートのサイズを検出し、AJAXリクエストで渡すのはどうですか？ PHP側の

$(document).ready(function() { 
    var height = $(window).height(); 
    var width = $(window).width(); 
    $.ajax({ 
     type: 'POST', 
     url: image.php, 
     data: { 
      "height": height, 
      "width": width 
     }, 
     success: function (data) { 
      $("#viewarea").html(data); 
     }, 
    }); 
}); 

あなたはちょうどあなたが戻ってサーバーに `screen.width`と` screen.height`を送信するためにJSを必要とするだろう、それを取得し、データに

$_POST['height'] 
$_POST['width'] 

Answer 2

イメージを生成するPHPスクリプトに対するシンプルなAJAX/JQueryリクエストは、ここではうまくいくでしょうか？

ような何か：

var query_string = "x=<viewport-x>&y=<viewport-y>"; 
$('#viewport').html("Processing..."); 
$('#viewport').load('resize_image.php',query_string); 

あなたは自分のPHPスクリプトで$_GET['x']と$_GET['y'] VARSを取るとバックのページへの正しい画像パスをエコーする前TimThumbにそれらを渡す必要がその方法を。