4
function detectScreenCategory() {
  const width = window.innerWidth;
  const isTouch = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
  
  // Use matchMedia to detect the precision of the primary pointer device
  const hasCoarsePointer = window.matchMedia('(pointer: coarse)').matches; // Finger/Stylus
  const hasFinePointer = window.matchMedia('(pointer: fine)').matches;     // Mouse/Trackpad

  // 1. Physically Small & Handheld (Mobile)
  if (width <= 768 && isTouch && hasCoarsePointer) {
    return 'mobile';
  }
  
  // 2. Medium & Handheld (Tablet)
  if (width > 768 && width <= 1024 && isTouch && hasCoarsePointer) {
    return 'tablet';
  }
  
  // 3. Narrow Desktop Window (A desktop browser resized to be small)
  if (width <= 1024 && hasFinePointer) {
    return 'resized_desktop_narrow';
  }
  
  // 4. Standard Desktop
  return 'desktop';
}

// Example usage for an analytics payload:
const analyticsData = {
  event: "page_view",
  screen_category: detectScreenCategory(),
  viewport_width: window.innerWidth,
  viewport_height: window.innerHeight,
  device_pixel_ratio: window.devicePixelRatio
};

console.log(analyticsData);

alert(detectScreenCategory());