Retina显示屏自定义光标高清显示方案求问：CSS与jQuery实现

Great question—Retina cursor blurriness is such a frustrating gotcha that tons of developers run into, especially since browser support for high-res custom cursors is still all over the place. Let’s break down refined CSS fixes and a scroll-safe jQuery solution to get your cursor looking crisp.

CSS-Only Approach (Polished for Modern Browsers) #

Your existing CSS attempts were close, but small gaps in syntax, asset handling, and fallback logic are likely causing the blur. Here’s how to fix it:

1. Proper image-set Implementation (WebKit/Blink) #

The -webkit-image-set feature is the most reliable way to serve high-res cursors to Chrome, Edge, and Safari—just make sure your @2x asset is exactly twice the size of your standard cursor, and include clear fallback options:

body {
  /* Fallback for older browsers */
  cursor: url('assets/cursors/pointer.png') 0 0, pointer;
  /* Modern WebKit/Blink browsers */
  cursor: -webkit-image-set(
    url('assets/cursors/pointer.png') 1x,
    url('assets/cursors/pointer@2x.png') 2x
  ) 0 0, pointer;
  /* Firefox handles SVG cursors well—add explicit dimensions in your SVG file */
  cursor: url('assets/cursors/pointer.svg') 0 0, pointer;
}

Pro Tip: For SVG cursors, add width and height attributes directly in the SVG code (e.g., <svg width="24" height="24" ...>) instead of relying solely on viewBox—this prevents Safari and Firefox from scaling it incorrectly.

2. Media Query with Broad Retina Targeting #

Your original media query was missing a key dppx (dots per pixel) rule that ensures compatibility with newer high-res displays. Update it like this:

@media only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
  body {
    cursor: url('assets/cursors/pointer@2x.png') 0 0, pointer;
  }
}

If you have a @3x asset for ultra-high-res displays (like iPhone Pro models), add min-device-pixel-ratio: 3 to the media query list.

jQuery Solution (Fixing the Scroll Jump Issue) #

The jQuery-based approach you found delivers great crispness, but the scroll problem comes from tracking the wrong mouse position values. Here’s a refined version that stays locked to your cursor even when scrolling:

Step 1: Add a Custom Cursor Element #

First, drop this hidden div into your HTML—pointer-events: none ensures it won’t block clicks on other elements:

<div id="custom-cursor" style="display: none; position: fixed; pointer-events: none; z-index: 9999;"></div>

Step 2: Style for Retina Crispness #

Style the cursor to scale your high-res asset correctly without blur:

#custom-cursor {
  width: 24px; /* Your desired display size */
  height: 24px;
  background-image: url('assets/cursors/pointer@2x.png');
  background-size: 24px 24px; /* Scales the 2x asset down to standard size */
  image-rendering: crisp-edges; /* Ensures sharp, non-blurry rendering */
}

/* Optional: Add hover states for interactive elements */
#custom-cursor.hover {
  background-image: url('assets/cursors/pointer-hover@2x.png');
}

Step 3: jQuery Code (Scroll-Safe Mouse Tracking) #

This code uses clientX/clientY instead of pageX/pageY to track the mouse relative to the viewport, eliminating scroll drift:

$(document).ready(function() {
  const $cursor = $('#custom-cursor');
  
  // Hide the default system cursor
  $('body').css('cursor', 'none');
  
  // Track mouse movement and update custom cursor position
  $(document).on('mousemove', function(e) {
    $cursor.css({
      left: e.clientX + 'px',
      top: e.clientY + 'px',
      display: 'block'
    });
  });
  
  // Handle hover states for links/buttons
  $('a, button, [href]').hover(
    () => $cursor.addClass('hover'),
    () => $cursor.removeClass('hover')
  );
  
  // Keep cursor within viewport on window resize
  $(window).on('resize', function() {
    if ($cursor.is(':visible')) {
      const viewportWidth = $(window).width();
      const viewportHeight = $(window).height();
      const cursorWidth = $cursor.width();
      const cursorHeight = $cursor.height();
      
      $cursor.css({
        left: Math.min($cursor.position().left, viewportWidth - cursorWidth),
        top: Math.min($cursor.position().top, viewportHeight - cursorHeight)
      });
    }
  });
});

Key Fix: clientX/clientY stays aligned with the mouse even as the page scrolls, so your custom cursor won’t jump or lag.

Quick Additional Tips #

• Asset Sizing: Always create cursor assets at 2x (or 3x) your desired display size. For a 24x24 cursor, your high-res file should be 48x48 pixels.
• File Formats: PNG is best for opaque/translucent cursors; SVG works for vector designs but requires explicit dimensions.
• Test Everywhere: Safari has historically been finicky with SVG cursors, so always test with both PNG and SVG fallbacks.

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