如何针对分辨率相同但屏幕尺寸（英寸）不同的设备编写差异化CSS media query？

Hey there! Let’s tackle this problem head-on: since your T2 Light (15.6") and T2 Mini (11.6") share the same resolution, device pixel ratio, and CSS target width, standard viewport-based media queries won’t help us distinguish them. Here are the most reliable methods to style each device uniquely:

1. Detect Physical Screen Size with JavaScript (Most Precise) #

The best approach is to calculate the physical diagonal size of the screen and add a custom class to the document body. This directly targets the only difference between your devices: screen inches.

Step 1: Add JavaScript to Detect Screen Size #

// Calculate physical screen dimensions in inches
const dpr = window.devicePixelRatio;
const screenWidthPx = screen.width;
const screenHeightPx = screen.height;

// Convert pixels to inches (using standard 96 DPI for CSS reference)
const widthInches = screenWidthPx / dpr / 96;
const heightInches = screenHeightPx / dpr / 96;

// Calculate diagonal size using Pythagorean theorem
const diagonalInches = Math.sqrt(Math.pow(widthInches, 2) + Math.pow(heightInches, 2));

// Add custom class to body based on rounded diagonal size
const body = document.body;
if (diagonalInches >= 15 && diagonalInches <= 16) {
  body.classList.add('device-t2-light');
} else if (diagonalInches >= 11 && diagonalInches <= 12) {
  body.classList.add('device-t2-mini');
}

Step 2: Style with Custom Classes #

Now you can write CSS that targets each device explicitly:

/* Styles for T2 Light (15.6-inch) */
.device-t2-light .your-element {
  font-size: 18px;
  padding: 20px;
}

/* Styles for T2 Mini (11.6-inch) */
.device-t2-mini .your-element {
  font-size: 16px;
  padding: 15px;
}

Note: Calculations might have tiny margins of error, so using a range (e.g., 15–16 inches for T2 Light) ensures you catch the correct device.

2. Use User Agent String Detection #

If your two devices have unique identifiers in their user agent (UA) strings, you can detect that and apply styles accordingly. This works well if the manufacturer includes the device name in the UA.

Example Implementation: #

const userAgent = navigator.userAgent;
const body = document.body;

// Check for device-specific UA strings (replace with actual values from your devices)
if (userAgent.includes('T2 Light')) {
  body.classList.add('device-t2-light');
} else if (userAgent.includes('T2 Mini')) {
  body.classList.add('device-t2-mini');
}

Then use the same CSS classes as above. Keep in mind: UA strings can be spoofed or modified, so this is slightly less reliable than physical size detection.

3. Leverage Hardware/Interaction Differences (If Applicable) #

If one device has unique hardware features (e.g., only the T2 Mini supports touch, or the T2 Light has a hover-capable mouse), you can combine media queries to target those traits:

Example for Touch vs. Non-Touch: #

/* Target T2 Light (assuming it's non-touch) */
@media (hover: hover) and (min-width: 1336px) {
  .your-element {
    /* Styles here */
  }
}

/* Target T2 Mini (assuming it's touch-only) */
@media (hover: none) and (min-width: 1336px) {
  .your-element {
    /* Styles here */
  }
}

This is a fallback option—only use it if you’re certain the interaction/hardware traits differ between your devices, since some large screens also support touch.

Final Recommendation #

The physical screen size detection with JavaScript is the most robust solution for your case, as it directly targets the core difference between your devices. It avoids reliance on variable UA strings or hardware traits that might overlap.

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