如何自定义isMobile/isTablet/isDesktop屏幕判定逻辑？求最优方案

Hey there! Let's break this down for you step by step—we'll tweak the script you found, compare it to your current method, and cover more robust, industry-standard approaches.

Modifying the Existing Detection Script #

The core of that script is the define() method, where you set the breakpoints for mobile/tablet/desktop. Right now it uses 768px and 1360px as cutoffs, but we can update it to match your preferred 640px mobile threshold (or any standard breakpoints you want):

function getDeviceDetector() {
  var detector = {
    mobile: "mobile",
    tablet: "tablet",
    desktop: "desktop",
    oldHeight: null,
    oldWidth: null,
    current: function() { return this.define() },
    isMobile: function() { return this.define() === this.mobile },
    isTablet: function() { return this.define() === this.tablet },
    isDesktop: function() { return this.define() === this.desktop },
    // Customize your breakpoints here
    define: function() {
      const viewportWidth = this.width();
      // Match your existing mobile threshold
      if (viewportWidth <= 640) {
        return this.mobile;
      }
      // Set a tablet range (example: 641px to 1024px, a common tablet breakpoint)
      else if (viewportWidth <= 1024) {
        return this.tablet;
      }
      // Everything above is desktop
      else {
        return this.desktop;
      }
    },
    height: function() { return window.innerHeight },
    width: function() { return window.innerWidth },
    init: function() { 
      this.oldHeight = window.innerHeight;
      this.oldWidth = this.define();
    }
  };
  return detector;
}

// Usage example:
const device = getDeviceDetector();
if (device.isMobile()) {
  // Do your mobile-specific logic
} else if (device.isTablet()) {
  // Handle tablet view
}

Your Current Method vs. the Script #

Your existing code works perfectly for one-off checks, but the script you found is better for reusability—you can call isMobile(), isTablet() anywhere in your code without rewriting the media query logic. It also stores previous viewport dimensions (via init()), which is handy if you need to detect screen size changes over time.

More Standard & Robust Approaches #

For modern web development, these methods are more flexible and reliable:

1. Dynamic Media Query Listeners

Instead of checking once on page load, you can listen for viewport changes—critical for responsive UIs that need to update in real-time:

// Define your breakpoints as media queries
const mobileQuery = window.matchMedia('(max-width: 640px)');
const tabletQuery = window.matchMedia('(min-width: 641px) and (max-width: 1024px)');

// Function to handle device type updates
function updateDeviceUI() {
  if (mobileQuery.matches) {
    console.log("Switched to mobile view");
    // Update your UI for mobile
  } else if (tabletQuery.matches) {
    console.log("Switched to tablet view");
    // Update your UI for tablet
  } else {
    console.log("Switched to desktop view");
    // Update your UI for desktop
  }
}

// Run on initial page load
updateDeviceUI();

// Listen for viewport changes
mobileQuery.addEventListener('change', updateDeviceUI);
tabletQuery.addEventListener('change', updateDeviceUI);

2. Align with CSS Framework Breakpoints

If you're using a framework like Bootstrap, Tailwind, or Foundation, use their predefined breakpoints to keep your JavaScript behavior consistent with your CSS:

• Bootstrap 5 breakpoints:
  • Mobile: <576px
  • Tablet: 576px–991px
  • Desktop: ≥992px
• Tailwind breakpoints:
  • Mobile: <640px
  • Tablet: 640px–767px
  • Desktop: ≥768px

This ensures your JS and styles respond to the same screen size triggers, avoiding inconsistencies.

Quick Best Practices #

• Use window.innerWidth instead of screen.width: screen.width is the physical screen size, while window.innerWidth accounts for the actual viewport width (including scrollbars).
• Don't rely solely on screen size for touch detection: If you need to target touch devices, add a check like window.matchMedia('(hover: none) and (pointer: coarse)'), but screen size is still the primary factor for responsive design.

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