如何使用JavaScript限制卡片动画仅在指定屏幕尺寸下运行？

核心逻辑是在动画触发前增加设备/屏幕尺寸判断，不符合运行条件时直接终止动画执行，可根据需求选择以下两种判断逻辑，也可搭配CSS媒体查询做双重保险：

方案1：按屏幕宽度禁用（推荐，适配所有小屏设备） #

在原有点击事件逻辑最开头增加屏幕宽度判断，小于设定阈值时直接终止动画：

// 替换原有JS的点击事件部分即可，其余代码不变
cardW.addEventListener('click', function() {
    // 可根据自身需求调整阈值，768px为常规移动端和PC端的分界值
    if (window.innerWidth < 768) return;

    // 原有动画逻辑保持不变
    card1.style.transform = "translate(350px,0px)";
    card2.style.transform = "translate(-350px, 0px)";
    card3.style.transform = "translate(350px , 300px)";
    card4.style.transform = "translate(-350px , -300px)";
    card5.style.transform = "translate(-350px , 300px)";
    card6.style.transform = "translate(350px , -300px)";
    card7.style.transform = "translate(0px , -300px)";
    card8.style.transform = "translate(0px , 300px)";
    cardW.style.opacity = "0";
});

方案2：按设备类型禁用（仅识别移动设备） #

如果只需要在手机端禁用，小尺寸平板仍保留动画，可以用UA判断设备类型：

cardW.addEventListener('click', function() {
    // 识别是否为移动设备
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    if (isMobile) return;

    // 原有动画逻辑保持不变
    card1.style.transform = "translate(350px,0px)";
    // ...其余原有代码不变
});

可选：CSS层面双重保险 #

可以在CSS中新增媒体查询，彻底避免移动端出现异常过渡效果：

/* 原有CSS代码不变，新增以下内容 */
@media screen and (max-width: 767px) {
    .card {
        /* 禁用过渡动画 */
        transition: none !important;
    }
    /* 可选：让顶层卡片不可点击，完全禁用交互 */
    #cardW {
        pointer-events: none;
    }
}

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