What Is CSS Media Query Fingerprinting?

Paste into ChatGPT, Claude, or any LLM

On this page

CSS media query fingerprinting reads operating-system and device preferences through window.matchMedia(). Modern CSS media features expose the user's color-scheme preference, reduced-motion and reduced-transparency settings, contrast level, forced-colors mode, the primary pointer type (mouse vs touch), hover capability, and display metrics. Each is a low-entropy preference, but together they describe a device class and a user configuration that must be coherent with the platform - and headless browsers return revealing defaults that real users rarely all share.

API	window.matchMedia(query).matches
Reads	prefers-color-scheme, prefers-reduced-motion, contrast, forced-colors, pointer, hover
Pointer/hover	pointer:coarse + hover:none = touch device; pointer:fine = mouse
Coherence trap	A phone UA must report coarse pointer and no hover
Headless default	Uniform light scheme, fine pointer, hover - same across a fleet

What media queries expose

matchMedia() answers yes/no to environment questions that come from the OS and device:

prefers-color-scheme - light or dark, set by the OS theme.
prefers-reduced-motion and prefers-reduced-transparency - accessibility settings.
prefers-contrast and forced-colors - high-contrast / Windows high-contrast mode.
pointer and any-pointer - fine (mouse/stylus) vs coarse (finger).
hover and any-hover - whether the primary input can hover.
display metrics - resolution, aspect ratio, orientation.

Each is one bit or a small enum, so the entropy per feature is low. The value is in the combination and its coherence with the rest of the device story.

The coherence and uniformity tells

Two ways this catches scrapers. First, device coherence: a request with an Android or iPhone User-Agent must report pointer: coarse and hover: none, because phones have no fine pointer and cannot hover. A "phone" that reports pointer: fine and hover: hover is a desktop headless browser wearing a mobile UA. Likewise a touch-capable tablet and a mouse-driven desktop have different pointer/hover signatures that must match the claimed device and the touch/hardware signals.

Second, fleet uniformity: headless browsers default to light color scheme, no reduced motion, fine pointer, and hover enabled. Real human traffic is a mix - a meaningful fraction use dark mode, some enable reduced motion, mobile users report coarse pointers. A population of visitors that all report the identical headless-default media profile stands out against the natural spread. Anti-bot systems use the distribution, not just the individual values.

Code example

javascript

// OS/device preferences read via matchMedia
const mq = q => window.matchMedia(q).matches;
const cssProfile = {
  dark:        mq('(prefers-color-scheme: dark)'),
  reduceMotion:mq('(prefers-reduced-motion: reduce)'),
  forcedColors:mq('(forced-colors: active)'),
  coarse:      mq('(pointer: coarse)'),
  noHover:     mq('(hover: none)')
};

// Coherence check (pseudo):
//   /iPhone|Android/.test(ua) && (!cssProfile.coarse || !cssProfile.noHover)
//     -> mobile UA but desktop pointer/hover  = headless wearing a phone UA
// Distribution check:
//   entire visitor fleet reporting {dark:false, coarse:false, noHover:false}
//     -> headless default profile, anomalous vs real-user spread

Related terms

What Is Browser Fingerprinting?

Browser fingerprinting is a technique that identifies and tracks a visitor by combining dozens of small, observable characteristics of their…

What Is Hardware Fingerprinting?

Hardware fingerprinting reads device capability signals - CPU cores, RAM, and screen metrics - that JavaScript exposes directly. The main va…

What Is Screen Resolution Fingerprinting?

Screen resolution fingerprinting reads the display geometry a browser reports - screen.width/height, availWidth/availHeight, colorDepth, dev…

What Is Fingerprint Clustering?

Fingerprint clustering is the practice of grouping fingerprints from millions of real visitors by similarity, then rejecting any new visitor…

What Is Headless Browser Detection?

Headless browser detection is the set of probes anti-bot systems use to distinguish a headless or instrumented Chrome session from a real us…

What Is Fingerprint Entropy?

Fingerprint entropy measures how much identifying information a browser attribute carries, expressed in bits. A signal that splits the popul…

What Is Anti-Bot Detection?

Anti-bot detection is the set of techniques websites use to distinguish automated traffic from human users — and to block, challenge, or thr…

What Is Browser Fingerprinting Evasion?

Browser fingerprinting evasion is the practice of configuring an automated browser so that the combined fingerprint it presents — canvas, We…

Anti-Bot Vendor Detection Cheatsheet

The first step of any scrape against a protected site is identifying which anti-bot vendor is in front of it. The vendor determines almost e…

How Do Websites Detect Web Scrapers?

Websites detect scrapers by collecting hundreds of signals across the network, transport, browser, and behavioral layers, then scoring the c…

Concept map

How CSS Media Query Fingerprinting connects

The terms most directly tied to this one. Hover a node to see its neighbours, click to preview, drag to rearrange.

0 terms · 0 connections

You are here · Anti-Bot

Tools & solutions for this topic

Frequently asked questions

How much does a single media query reveal?

Very little on its own - most are one bit (dark mode on/off, hover yes/no). The signal comes from combining them and checking coherence with the claimed device, plus the distribution across a visitor population. A phone that reports a fine pointer, or a whole fleet sharing the identical headless-default profile, is what stands out.

What pointer and hover values should a mobile scraper report?

A real phone reports pointer: coarse and hover: none (and any-pointer: coarse, any-hover: none). If you present a mobile User-Agent, these must match, along with touch support and screen metrics. Reporting a fine pointer or hover capability under a phone UA is a direct contradiction.

Should I randomize prefers-color-scheme to look human?

Setting a realistic mix rather than always-light helps avoid fleet uniformity, but it must stay coherent and stable within a session and consistent with any rendered theme. The goal is to resemble the natural distribution of real users, not to flip values randomly, which can itself look anomalous.

Last updated: 2026-05-30