用JS和PHP做任何“后端媒体查询”的方法？

Question

The project I am working on consists of a grid showing content. I would like to resize each item on the grid to a fourth of the viewport's size. This would be very easy with Javascript, but there is some backend stuff that needs to be aware of the size of each item:

I am using Timthumb to resize the image of item to its appropiate size, so I would need to detect the viewport's width, and send the appropiate value (the viewport's width / 4) to the php that serves each item, so it tells Timthumb the appropiate size to use.

What would be the best approach to this problem?

Answer 1

How about when requesting the page, in $(document).ready, detect the size of viewport using jQuery and pass it in an AJAX request?

$(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);
        },
    });
});

at PHP side you can just get it and return the data

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