Python 使用CSS媒体查询和Flask/Jinja进行设备检测

我正在尝试使用CSS媒体查询和Jinja和Flask来确定设备类型，并基于设备提供适当大小的图像。来自手机的请求会得到比台式机、平板电脑等更小的图像

问题是，

{{post | get_image（post，480）}

的计算独立于媒体查询，从而触发每个实例的

get_image

自定义模板过滤器

get_image

也是为设备呈现正确图像的地方，因此多次调用（可能是不必要的）可能会对性能产生负面影响

理想情况下，一次调用

get_image

，只执行一个媒体查询，但挑战在于媒体查询和Jinja完全独立，一方对另一方一无所知

我真的很感激其他方法或建议来改进我的方法。提前谢谢

以下是媒体查询的示例：

  @media only screen and (max-device-width: 480px) {
    .post {
      background: url("{{ post|get_image(post, 480) }}") no-repeat center center fixed; 
    }
  }

  @media only screen and (max-device-width: 1224px) {
    .post {
      background: url("{{ post|get_image(post, 1224) }}") no-repeat center center fixed; 
    }
  }

---

将设置更改为如下所示：

.post {
    background: none no-repeat center center fixed;
}

@media only screen and (max-device-width: 480px) {
    .post {
      background-image: url("{{ get_image_url(post, 480) }}"); 
    }
}

@media only screen and (max-device-width: 1224px) {
    .post {
      background-image: url("{{ get_image_url(post, 1224) }}"); 
    }
}

/posts/<int:post_id>/background?s=NNNN

您正在生成的URL可能如下所示：

.post {
    background: none no-repeat center center fixed;
}

@media only screen and (max-device-width: 480px) {
    .post {
      background-image: url("{{ get_image_url(post, 480) }}"); 
    }
}

@media only screen and (max-device-width: 1224px) {
    .post {
      background-image: url("{{ get_image_url(post, 1224) }}"); 
    }
}

/posts/<int:post_id>/background?s=NNNN

最后，在Flask控制器中生成映像，将其保存到缓存目录，并将其返回给请求者：

@app.route("/posts/<int:post_id>/background")
def generate_image(post_id):
    # Assume that if we got here the image does not yet exist
    dimensions = int(request.args.get("s", 800), 10)

    image_data = generate_image(post_id, dimensions)

    image_name = "{}_{}.png".format(post_id, dimensions)
    image_path = os.path.join("/cache", image_name)

    with open(image_path, "wb") as image:
        image.write(image_data)

    return Response(image_data, content_type="image/png")

@app.route（“/posts//background”）
def生成图像（post_id）：
#假设我们到了这里，图像还不存在
维度=int（request.args.get（“s”，800），10）
图像\数据=生成\图像（post\ id，尺寸）
image_name=“{}}{}.png”。格式（post_id，维度）
image\u path=os.path.join（“/cache”，image\u name）
打开（图像路径，“wb”）作为图像：
image.write（图像\u数据）
返回响应（图像数据，内容类型=“图像/png”）

---

如果图像生成部分过于昂贵，甚至无法考虑在控制器中执行此操作，则可以将204 No Content（缓存控制设置为private）和Expires（过期）返回，并将图像生成任务放入进程外队列。然后只需在JavaScript代码中轮询该端点，直到图像准备好由代理服务器提供。

您正在询问如何“改进”这一点，但就我而言，您的操作没有问题。你真正关心的是什么？您是否认为在多次调用

get_image

时，模板的渲染速度会太慢？是的，可能会有4-5次调用来获取_image（每个媒体查询一次）这就是实际生成适当图像的原因。是否有任何方法可以让

get\u image

不生成图像？我需要将图像生成与设备类型联系起来。关于我如何或在哪里可以这样做的任何建议？不，你不能复制你以上没有权衡。例如，带有后台URL的HTTP响应只发送一次。如果您更改此设置，以便用户仅获得一个用于其当前屏幕大小的背景URL，并且用户调整其屏幕大小，则他们将无法使用您提供给他们的图像（而媒体查询将切换到新图像）。我不确定您是否真的需要在这个CSS的GET请求期间生成图像，或者您只是认为您需要。为什么不在第一次访问图像URL时生成图像，然后将其缓存？在您的示例中，在呈现模板时不会多次调用\u image\u URL（）吗？@Raj-是的，但它只是生成一个字符串，而不是生成实际的图像。图像生成延迟到请求时间，此时浏览器（理论上）只请求它实际需要的图像。非常感谢。我并没有精确地实现这一点，但我确实使用了这个通用模式，所以它非常有用。因此，我将此标记为正确答案！再次感谢！