JSFiddle - React, Tailwind, and code Playground

HTML

<head></head>

<div>When you zoom in, this breaks. This div should not give the page scroll bars. In Webkit, the media query width is in system pixels, when it should be in CSS pixels.</div>

<p id=widthInfo></p>

<button onclick="onresize()">Recalculate (usually unnecessary).</button>

<p>At first I thought this discrepancy could be useful to <a href="https://github.com/yonran/detect-zoom/">detect zoom level</a> (since it's the same as document.width which is gone now), but then I realized that this is a pretty bad bug that really should be fixed asap.

CSS

@media(min-width: 400px) {
    div {
        width: 400px;
    }
}
div {
    background: lightblue;
}

JavaScript

// copied from https://github.com/yonran/detect-zoom
function mediaQueryBinarySearch(property, unit, a, b, maxIter, epsilon) {
    var head = document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    var div = document.createElement('div');
    div.className = 'mediaQueryBinarySearch';
    head.appendChild(style);
    div.style.display = 'none';
    document.body.appendChild(div);
    var r = binarySearch(a, b, maxIter);
    head.removeChild(style);
    document.body.removeChild(div);
    return r;

    function binarySearch(a, b, maxIter) {
        var mid = (a + b) / 2;
        if (maxIter == 0 || b - a < epsilon) return mid;
        if (mediaQueryMatches(mid + unit)) {
            return binarySearch(mid, b, maxIter - 1);
        } else {
            return binarySearch(a, mid, maxIter - 1);
        }
    }

    function mediaQueryMatches(r) {
        style.sheet.insertRule('@media (' + property + ':' + r + ') {.mediaQueryBinarySearch ' + '{text-decoration: underline} }', 0);
        var matched = getComputedStyle(div, null).textDecoration == 'underline';
        style.sheet.deleteRule(0);
        return matched;
    }
}

onresize = function() {
  var mqWidth = Math.round(mediaQueryBinarySearch("min-width", "px", 0, 5000, 20, .05)*100)/100;
  var cssWidth = document.documentElement.clientWidth;
  document.getElementById('widthInfo').innerHTML =
      "media query width: " + mqWidth +
      "; CSS width: " + cssWidth;
}
onresize();

if ('ontouchstart' in window)
  onscroll = onresize;