如何在宽度小于1200px的移动设备上禁用自定义光标脚本

要让自定义光标只在屏幕宽度≥1200px的设备上生效，需要分别修改CSS和JavaScript代码，具体如下：

一、修改CSS代码 #

把所有和自定义光标相关的样式包裹在媒体查询@media (min-width: 1200px)中，这样只有大屏幕设备才会应用这些样式，移动设备会保持默认光标：

<style>
@media (min-width: 1200px) {
  html, 
  html *, 
  body, 
  body * {
          cursor: none;
  }
  .cursor-dot,
  .cursor-dot-outline {
    mix-blend-mode: difference;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    opacity: 0;
    position: fixed;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  }

  .cursor-dot {
    z-index:99999999;
    width: 10.0px;
    height: 10.0px;
    background-color: rgba(255, 255, 255, 1.00);
    border: solid;
    border-radius: 50%;
    border-width: 0px;
    border-color: #000;
  }

  .cursor-dot-outline {
    z-index:99999998;
    width: 0.0px;
    height: 0.0px;
    background-color: rgba(169, 169, 222, 0.2);
    border: solid;
    border-radius: 50%;
    border-width: 0px;
    border-color: #000;
  }
}
</style>

二、修改JavaScript代码 #

添加屏幕宽度判断，只有当窗口宽度≥1200px时才初始化光标；同时监听窗口缩放事件，动态开启/关闭自定义光标：

<script>
let cursorInstance = null;
let cursorElements = {
  dot: null,
  outline: null
};

function initCursor() {
  // 先移除已存在的光标元素，避免重复创建
  if (cursorElements.dot) cursorElements.dot.remove();
  if (cursorElements.outline) cursorElements.outline.remove();

  // 创建光标元素
  $("body").prepend('<div class="cursor-dot-outline"></div>');
  $("body").prepend('<div class="cursor-dot"></div>');

  cursorElements.dot = document.querySelector('.cursor-dot');
  cursorElements.outline = document.querySelector('.cursor-dot-outline');

  cursorInstance = {
    delay: 8,
    _x: 0,
    _y: 0,
    endX: (window.innerWidth / 2),
    endY: (window.innerHeight / 2),
    cursorVisible: true,
    cursorEnlarged: false,
    $dot: cursorElements.dot,
    $outline: cursorElements.outline,
    animationFrameId: null,
    
    init: function() {
        this.dotSize = this.$dot.offsetWidth;
        this.outlineSize = this.$outline.offsetWidth;
        
        this.setupEventListeners();
        this.animateDotOutline();
    },

    setupEventListeners: function() {
        var self = this;
        
        document.querySelectorAll('a').forEach(function(el) {
            el.addEventListener('mouseover', function() {
                self.cursorEnlarged = true;
                self.toggleCursorSize();
            });
            el.addEventListener('mouseout', function() {
                self.cursorEnlarged = false;
                self.toggleCursorSize();
            });
        });
        
        document.addEventListener('mousedown', function() {
            self.cursorEnlarged = true;
            self.toggleCursorSize();
        });
        document.addEventListener('mouseup', function() {
            self.cursorEnlarged = false;
            self.toggleCursorSize();
        });
  
        document.addEventListener('mousemove', function(e) {
            self.cursorVisible = true;
            self.toggleCursorVisibility();

            self.endX = e.clientX;
            self.endY = e.clientY;
            self.$dot.style.top = self.endY + 'px';
            self.$dot.style.left = self.endX + 'px';
        });
        
        document.addEventListener('mouseenter', function(e) {
            self.cursorVisible = true;
            self.toggleCursorVisibility();
            self.$dot.style.opacity = 1;
            self.$outline.style.opacity = 1;
        });
        
        document.addEventListener('mouseleave', function(e) {
            self.cursorVisible = true;
            self.toggleCursorVisibility();
            self.$dot.style.opacity = 0;
            self.$outline.style.opacity = 0;
        });
    },
    
    animateDotOutline: function() {
        var self = this;
        
        self._x += (self.endX - self._x) / self.delay;
        self._y += (self.endY - self._y) / self.delay;
        self.$outline.style.top = self._y + 'px';
        self.$outline.style.left = self._x + 'px';
        
        self.animationFrameId = requestAnimationFrame(this.animateDotOutline.bind(self));
    },
    
    toggleCursorSize: function() {
        var self = this;
        
        if (self.cursorEnlarged) {
            self.$dot.style.transform = 'translate(-50%, -50%) scale(4)';
            self.$outline.style.transform = 'translate(-50%, -50%) scale(0)';
        } else {
            self.$dot.style.transform = 'translate(-50%, -50%) scale(1)';
            self.$outline.style.transform = 'translate(-50%, -50%) scale(1)';
        }
    },
    
    toggleCursorVisibility: function() {
        var self = this;
        
        if (self.cursorVisible) {
            self.$dot.style.opacity = 1;
            self.$outline.style.opacity = 1;
        } else {
            self.$dot.style.opacity = 0;
            self.$outline.style.opacity = 0;
        }
    },
    
    destroy: function() {
        // 取消动画帧
        if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId);
        // 移除光标元素
        this.$dot.remove();
        this.$outline.remove();
    }
  };

  cursorInstance.init();
}

function checkScreenSize() {
  if (window.innerWidth >= 1200) {
    if (!cursorInstance) {
      initCursor();
    }
  } else {
    if (cursorInstance) {
      cursorInstance.destroy();
      cursorInstance = null;
    }
  }
}

// 页面加载时检查一次
checkScreenSize();

// 监听窗口缩放事件
window.addEventListener('resize', checkScreenSize);
</script>

关键说明： #

• CSS通过媒体查询限制样式生效范围，移动设备不会隐藏默认光标，也不会加载自定义光标样式。
• JS部分通过checkScreenSize函数判断屏幕宽度，动态创建/销毁光标元素，同时监听窗口缩放，确保窗口大小变化时光标状态同步更新。

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