Question

我正在处理的项目包含一个显示内容的网格。我想将网格上的每个项目调整为视口大小的四分之一。使用Javascript这很容易，但是有一些后端的东西需要知道每个项目的大小：

我正在使用Timthumb将项目图像的大小调整为合适的大小，因此我需要检测视口的宽度，并将适当的值（视口的宽度/ 4）发送到为每个项目提供服务的php，所以它告诉Timthumb适当的大小。

解决这个问题的最佳方法是什么？

Answer 1

在$（document）.ready中请求页面时，如何使用jQuery检测视口的大小并将其传递给AJAX请求？

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

在PHP端你可以得到它并返回数据

$_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，然后再将正确的图像路径回显到页面。

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

2 个答案: