使用CSS媒體查詢和Flask/Jinja進行設備檢測

Question

我試圖使用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; 
    } 
    } 

Answer 1

更改您的設置是這樣的：

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

：

.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) }}"); 
    } 
} 

你生成可能是這個樣子的網址

然後，設置您的代理服務器以便將這些映像從緩存目錄中提取出來並轉發他們到您的圖像生成器，如果不存在圖像：

# Fake server configuration 
# for no server known to man 
location /posts/(:post-id:\d+)/background { 
    try_files /cache/:post-id:_\d+\.png or @flask-server 
} 

最後，在瓶器生成圖像，將其保存到緩存目錄，並送達回請求：

@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") 

如果圖像生成部分太昂貴，甚至無法考慮在控制器中執行操作，則可以返回204將No-Content與Cache-Control設置爲private並在過去設置Expires，並將圖像生成任務放入out-of進程隊列。然後只需在JavaScript代碼中輪詢該端點，直至圖像準備好由代理服務器提供服務。