Zoom fix via css media query instead of JS

index.css

@@ -338,4 +338,35 @@ html[data-theme="dark"] .treecollapse summary::before{
 
 .treecollapse details[open] > summary::before{
     background-position : calc(-2 * var(--radius)) 0;
-}
+}
+
+/*
+Zoom fix to have straight lines in treeview
+Zoom level and dpi resolution:
+- 175%: 336dpi
+- 150%: 288dpi
+- 110%: 212dpi
+- 100%: 192dpi
+- 90%:  173dpi
+- 80%:  154dpi
+*/
+@media (resolution <= 154dpi) {
+    :root{
+        --zoom-fix: -0.6px;
+    }
+}
+@media (155dpi <= resolution < 192dpi) {
+    :root{
+        --zoom-fix: -0.7px;
+    }
+}
+@media (192dpi <= resolution < 336dpi) {
+    :root{
+        --zoom-fix: -1px;
+    }
+}
+@media (336dpi <= resolution) {
+    :root{
+        --zoom-fix: -0.9px;
+    }
+}

index.js

@@ -214,19 +214,3 @@ selectTag.onchange = function (ev) {
     let tag = ev.target.selectedOptions[0].value;
     window.location.href = 'https://rawcdn.githack.com/lapo-luchini/asn1js/' + tag + '/index.html';
 };
-
-// zoom fix to have straight lines in treeview
-if (window.devicePixelRatio >= 2  ) {
-    let treecollapse = document.querySelector(':root');
-    treecollapse.style.setProperty('--zoom-fix', '-0.8px');
-} else if (window.devicePixelRatio >= 1.5  ) {
-    let treecollapse = document.querySelector(':root');
-    treecollapse.style.setProperty('--zoom-fix', '-0.5px');
-} else if (window.devicePixelRatio <= 0.81  ) {
-    let treecollapse = document.querySelector(':root');
-    treecollapse.style.setProperty('--zoom-fix', '-1.4px');
-} else if (window.devicePixelRatio <= 0.9  ) {
-    let treecollapse = document.querySelector(':root');
-    treecollapse.style.setProperty('--zoom-fix', '-1.5px');
-}
-console.log(window.devicePixelRatio);