javascript - 如何使用 Twig 检测屏幕尺寸或移动/桌面

Question

我目前使用 twig 作为我的模板引擎，我想在使用移动设备和桌面设备加载网站时加载图像的不同 url。有没有简单的方法可以做到这一点？

所以我想做这样的事情:

{% if (mobile) %}
   <img src="{{ picture.getLowresimageurl() }}"/>
{% else %}
   <img src="{{ picture.getMedresimageurl() }}"/>
{% endif %}

有办法吗？

Answer 1

您可以使用 MobileDetectBundle用于检测移动设备，管理移动 View 并重定向到移动和平板电脑版本

Twig 助手

{% if is_mobile() %}
{% if is_tablet() %}
{% if is_device('iphone') %} # magic methods is[...]

Twig 示例

{% if is_mobile_view() %}
    {% extends "MyBundle:Layout:mobile.html.twig" %}
{% else if is_tablet_view() %}
    {% extends "MyBundle:Layout:tablet.html.twig" %}
{% else if is_full_view() or is_not_mobile_view() %}
    {% extends "MyBundle:Layout:full.html.twig" %}
{% endif %}