Detect scale settings (dpi) with JavaScript or CSS

Question

I\'ve noticed that a small laptop with a 1920x1080 screen, windows 10 will auto adjust the scaling. I\'ve seen it as high as 150%. Is there a way we can detect this? My media qu

Answer 1

For anyone looking into this, building a little on Martin Adamek's answer, you can do this in jQuery and scale something with CSS transform:

// if the user has display scaling active, scale with CSS transform    
if (window.devicePixelRatio !== 1){
    let scaleValue = (1/window.devicePixelRatio);
    $('#containerToBeScaled').css('transform','scale('+scaleValue+')');
}

This works well if you have a pop-Up for example and you want it to look the same regardless of display scaling