如何在Twig中为不同移动端屏幕设置不同字符串长度阈值

当然可以实现！在Twig里针对不同尺寸的小型移动设备设置不同的字符串长度阈值，有几种实用的方式，我给你拆解一下：

方法一：Twig + CSS媒体查询（推荐，灵活易维护） #

这个思路是先把所有阈值对应的"查看更多"按钮都渲染出来，再用CSS媒体查询控制不同屏幕尺寸下显示对应的按钮，完全前端适配，不用依赖后端设备判断。

Twig代码： #

{# 先定义不同移动端尺寸对应的长度阈值，你可以根据需求调整数值和尺寸命名 #}
{% set desc_thresholds = {
    'xs': 120,  # 超小屏，比如宽度<360px的设备
    'sm': 155,  # 常规小屏，比如360px-479px
    'md': 180   # 中型移动设备，比如480px-767px
} %}

{# 遍历阈值，为每个尺寸渲染对应的按钮容器 #}
{% for size, threshold in desc_thresholds %}
    {% if page.description|length > threshold %}
        <div id="brand-desc-{{ size }}" class="brand-desc-mobile center-align">
            <a id="modalDescBtn-{{ size }}" class="modal-trigger" href="#modalDesc">Lire la suite</a>
        </div>
    {% endif %}
{% endfor %}

CSS代码： #

/* 默认隐藏所有移动端按钮 */
.brand-desc-mobile {
    display: none;
}

/* 超小屏设备（<360px）显示对应按钮 */
@media only screen and (max-width: 359px) {
    #brand-desc-xs {
        display: block;
    }
}

/* 常规小屏设备（360px-479px）显示对应按钮 */
@media only screen and (min-width: 360px) and (max-width: 479px) {
    #brand-desc-sm {
        display: block;
    }
}

/* 中型移动设备（480px-767px）显示对应按钮 */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    #brand-desc-md {
        display: block;
    }
}

这种方法的好处是：调整阈值或屏幕范围时，只需要修改Twig的变量或CSS的媒体查询，维护成本低，而且用户调整窗口大小的时候会自动切换显示状态。

方法二：后端设备检测 + Twig变量判断 #

如果你的项目后端已经能获取设备尺寸类型（比如通过User Agent解析，或者前端传递视口宽度到后端），可以直接在Twig里根据设备类型设置不同阈值：

{# 假设后端已经把当前设备的尺寸类型存在device_size变量里，比如'xs'/'sm'/'md' #}
{% set threshold = 155 %} {# 设置默认阈值 #}

{% if device_size == 'xs' %}
    {% set threshold = 120 %}
{% elseif device_size == 'sm' %}
    {% set threshold = 155 %}
{% elseif device_size == 'md' %}
    {% set threshold = 180 %}
{% endif %}

{# 用最终确定的阈值判断是否显示按钮 #}
{% if page.description|length > threshold %}
    <div id="brand-desc-mobile" class="hide-on-med-and-up center-align">
        <a id="modalDescBtn" class="modal-trigger" href="#modalDesc">Lire la suite</a>
    </div>
{% endif %}

不过这种方法只能在页面加载时判断一次，用户调整窗口大小不会动态更新，适合不需要实时响应的场景。

方法三：Twig + JavaScript实时判断 #

如果需要窗口大小变化时动态调整按钮的显示状态，可以用JS实时检测视口宽度，再匹配对应的阈值：

Twig代码： #

{# 先渲染隐藏的按钮容器 #}
<div id="brand-desc-mobile" class="hide-on-med-and-up center-align" style="display: none;">
    <a id="modalDescBtn" class="modal-trigger" href="#modalDesc">Lire la suite</a>
</div>

{# 把描述长度和阈值配置传递给JS #}
<script>
    const descLength = {{ page.description|length }};
    const thresholdConfig = {
        xs: 120,
        sm: 155,
        md: 180
    };

    function toggleShowMoreBtn() {
        const btnContainer = document.getElementById('brand-desc-mobile');
        let currentThreshold = thresholdConfig.sm; // 默认小屏阈值

        // 根据当前视口宽度匹配阈值
        if (window.innerWidth < 360) {
            currentThreshold = thresholdConfig.xs;
        } else if (window.innerWidth >= 480) {
            currentThreshold = thresholdConfig.md;
        }

        // 根据阈值判断是否显示按钮
        btnContainer.style.display = descLength > currentThreshold ? 'block' : 'none';
    }

    // 页面加载时初始化
    window.addEventListener('load', toggleShowMoreBtn);
    // 窗口大小变化时重新判断
    window.addEventListener('resize', toggleShowMoreBtn);
</script>

这种方法可以实时响应窗口尺寸变化，用户缩放窗口时会自动更新按钮的显示状态，体验更流畅。

内容的提问来源于stack exchange，提问作者Harriet Rutherford