如何为移动端、桌面端及iPad设置不同的网站背景色？

阿华AIGC实验室

2026-5-25

How to Set Different Background Colors for Mobile, Desktop, and iPad

Great question—this is such a common pain point because modern iPads (especially the larger Pro models) have viewport widths that overlap with many desktop monitors, making standard width-based media queries useless for distinguishing them. Let’s break down three solid approaches to solve this:

1. Use CSS Media Queries with Pointer & Hover Features

This method targets devices based on their primary input type (touch vs. mouse) instead of just screen width, which is perfect for separating iPads from desktop systems.

Mobile: Small screens + touch-only input
iPad: Medium/large screens + touch-only input
Desktop: Large screens + fine-point input (mouse/trackpad)

Here’s the CSS:

/* Mobile: Small touchscreens */
@media (max-width: 767px) and (pointer: coarse) {
  body {
    background-color: #ffcccc; /* Light red */
  }
}

/* iPad: Touchscreens with desktop-like widths */
@media (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {
  body {
    background-color: #ccffcc; /* Light green */
  }
}

/* Desktop: Fine-point input devices */
@media (min-width: 1025px) and (pointer: fine) {
  body {
    background-color: #ccccff; /* Light blue */
  }
}

Adjust the width ranges to match your specific design needs—this works because iPads will trigger pointer: coarse (touch input) while desktops use pointer: fine.

2. Target iPad with Device-Specific Media Queries

If you need to target iPads specifically by their hardware specs (like resolution and pixel ratio), you can use device-width queries. Note that this requires updating for new iPad models, but it’s reliable for current devices:

/* Mobile */
@media (max-width: 767px) {
  body {
    background-color: #ffcccc;
  }
}

/* iPad (portrait and landscape) */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  body {
    background-color: #ccffcc;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  body {
    background-color: #ccccff;
  }
}

This targets all iPad models (including Pro) by their native device resolution and pixel ratio.

3. Detect iPad with JavaScript and Add a Custom Class

For more control, use JavaScript to detect the device and add a class to the <body> element, then style based on that class:

First, the JS to detect iPads (including iPadOS devices that mimic desktop user agents):

function isiPadDevice() {
  // Check for classic iPad user agent
  const isClassiciPad = navigator.userAgent.match(/iPad/i) !== null;
  // Check for iPadOS devices pretending to be Macs (they have touch support)
  const isiPadOS = navigator.userAgent.match(/Macintosh/i) && navigator.maxTouchPoints > 1;
  
  return isClassiciPad || isiPadOS;
}

// Add appropriate class to body
window.addEventListener('load', () => {
  if (isiPadDevice()) {
    document.body.classList.add('is-ipad');
  } else if (window.innerWidth < 768) {
    document.body.classList.add('is-mobile');
  } else {
    document.body.classList.add('is-desktop');
  }
});

Then style with CSS:

.is-mobile {
  background-color: #ffcccc;
}

.is-ipad {
  background-color: #ccffcc;
}

.is-desktop {
  background-color: #ccccff;
}

This approach is great if you need to apply more complex styles or behaviors beyond just background color.

Final Recommendation

The first method (pointer/hover media queries) is the most future-proof because it focuses on how users interact with the device, not specific hardware models. It works seamlessly as new devices are released without needing constant updates.

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