devicepixel2-ref.html (760B)
1 <!doctype html> 2 <body> 3 <script type="module"> 4 import createPatternDataURL from './create-pattern-data-url.js'; 5 6 const { patternSize, dataURL } = createPatternDataURL(); 7 document.body.style.backgroundImage = `url("${dataURL}")`; 8 9 function setBackgroundPatternTo1DevicePixel() { 10 const oneDevicePixel = 1 / devicePixelRatio; 11 const patternPixels = oneDevicePixel * patternSize; 12 document.body.style.backgroundSize = `${patternPixels}px ${patternPixels}px`; 13 } 14 setBackgroundPatternTo1DevicePixel(); 15 16 // If we're viewed interactively and the user activates 17 // full-page-zoom, changes the page zoom level, or resizes 18 // the window, update the rendering to account for that: 19 window.addEventListener('resize', setBackgroundPatternTo1DevicePixel); 20 </script> 21 </body>