寫一個判斷裝置來源的方法

function detectDevice() {
  const userAgent = navigator.userAgent;
  let device = "Unknown";

  // Check for common mobile keywords
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);

  if (isMobile) {
    // Further differentiate between iOS and Android
    if (/iPhone|iPad|iPod/i.test(userAgent)) {
      device = "iOS";
    } else if (/Android/i.test(userAgent)) {
      device = "Android";
    } else {
      device = "Mobile"; // Other mobile OS
    }
  } else {
    // Check if it's a desktop device
    if (/Windows|Macintosh|Linux/i.test(userAgent)) {
      device = "Desktop";
    }
  }

  return device;
}


// Example usage:
const deviceType = detectDevice();

switch (deviceType) {
  case "Desktop":
    // Desktop-specific code
    console.log("You are using a Desktop device.");
    break;
  case "iOS":
    // iOS-specific code
    console.log("You are using an iOS device.");
    break;
  case "Android":
    // Android-specific code
    console.log("You are using an Android device.");
    break;
  case "Mobile":
    // Other mobile OS
    console.log("You are using a Mobile device.");
    break;
  default:
    // Unknown device
    console.log("Could not determine device type.");
}


// More specific examples (optional):

// Check for specific iPad models (requires more detailed regex)
function isIpad() {
  return /Macintosh/i.test(navigator.userAgent) && navigator.maxTouchPoints && navigator.maxTouchPoints > 2;
}


// Check if device is a tablet (more complex, not always reliable)
function isTablet() {
  const isIpad = /Macintosh/i.test(navigator.userAgent) && navigator.maxTouchPoints && navigator.maxTouchPoints > 2;
  const isAndroidTablet = /Android/i.test(navigator.userAgent) && !/Mobile/i.test(navigator.userAgent);
  return isIpad || isAndroidTablet;
}

This improved version provides:

• Clearer device categorization: Distinguishes between major mobile platforms (iOS, Android) and other mobile OSes.
• Desktop detection: Identifies Windows, macOS, and Linux systems.
• Example usage: Demonstrates how to use the function and implement device-specific logic.
• Optional advanced checks: Includes examples for detecting iPads and tablets (with caveats).
• Comments: Explains the code's logic and limitations.

Key improvements and considerations:

• navigator.userAgent limitations: This approach relies on the user agent string, which can be spoofed or modified. It's generally reliable, but not foolproof.
• Feature detection: For truly robust device adaptation, consider using feature detection (checking for specific browser capabilities) in conjunction with user agent parsing.
• Modern alternatives: While navigator.userAgent is still widely used, newer APIs like navigator.userAgentData (currently experimental) may offer more reliable and structured device information in the future. Check for browser compatibility before using them.
• Tablet detection complexity: Accurately identifying tablets can be challenging due to the variety of devices and overlapping characteristics with phones and desktops. The provided isTablet function is a starting point, but might require further refinement.

This comprehensive approach provides a solid foundation for device detection in your front-end projects. Remember to test thoroughly on various devices and browsers to ensure accuracy.