devicePixelRatio: remove or polyfill

[patmmccann]

devicePixelRatio, a reasonably high figerprint tool according to https://github.com/duckduckgo/tracker-radar/blob/main/build-data/generated/api_fingerprint_weights.json is used in a few places throughout the project. I propose we consolidate them into a util and perhaps find an alternative eg

function detectDPRViaMQ() {
  // Probe common DPRs first; expand if you like (or do a binary search).
  const candidates = [0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5];
  let best = 1;
  for (const d of candidates) {
    if (matchMedia(`(resolution: ${d}dppx)`).matches ||
        matchMedia(`(min-resolution: ${d}dppx)`).matches) {
      best = d;
    }
  }
  return best;
}

or

function detectDPRViaCanvas() {
  const c = document.createElement('canvas');
  c.style.width = '100px';
  c.style.height = '100px';
  document.body.appendChild(c);

  // Force a 100×100 CSS px box, then sync backing store to it
  const rect = c.getBoundingClientRect(); // ~100×100 CSS px
  c.width = Math.round(rect.width);
  c.height = Math.round(rect.height);

  // Now ask how many actual pixels are in a 1 CSS px square
  // Increase backing size; this often scales by DPR.
  const estimated = Math.sqrt(
    (c.width * c.height) / (rect.width * rect.height)
  );

  c.remove();
  return +estimated.toFixed(2);
}

[patmmccann]

Easy to disable now