javascript - Twig 根据分辨率对元素进行分组

Question

我有一个 for 循环遍历 div 并使用批处理对它们进行分组，我的分组大小需要根据分辨率进行更改，因此在移动设备上批处理应该是 1，在桌面上它应该是 4，通过分辨率递增。

我如何在 twig/drupal 中实现它？

{% for column in items|batch(4) %}
                <div {{ attributes.addClass('swiper-slide').removeClass(classes, 'field--items', 'swiper-wrapper') }}>
                    {% for item in column %}
                        <div{{ item.attributes.addClass('field--item') }}>{{ item.content }}</div>
                    {% endfor %}
                </div>
            {% endfor %}

Answer 1

Twig 工作在服务器端，它无法知道设备的分辨率。您可以使用一个库来通过 请求 header 中的 User-Agent 检测用户的设备，例如 http://mobiledetect.net/

---

如果您从事的是响应式元素，请考虑使用 CSS @media 查询来实现多种分辨率。