Condition (if) to set engine.setHardwareScalingLevel from pixelRatio of Retina display / Normal display

Hi Everybody,

I’m trying to set two different HardwareScalingLevel for retina and no-retina displays in order to scale the GUI (and the sharpness of the render) to a proper size.
As far as I know, Retina displays have a devicePixelRatio >= 2 while no-Retina displays have a devicePixelRatio <= 1.

I’ve tried the following code but it does not work:

const pixelRatio = window.devicePixelRatio;

const ToggleHardwareScalingLevel = () => {
  if ( pixelRatio > 1) {
     engine.setHardwareScalingLevel(1.5 / pixelRatio);     // in a Retina display, to have the GUI a little bigger
  else {
     engine.setHardwareScalingLevel(1 / pixelRatio);       // in a no-Retina display, to have the GUI a little smaller

Do somebody have any idea what’s wrong?

Of course, I’ve tried the following code and it works but for all time of devices generating this GUI scaling issue that I want to fix:

engine.setHardwareScalingLevel(1.5 / pixelRatio);

Thank you so much all in advance!

Hi nickkilo,

Welcome to Babylon! Can you elaborate on the exact manner in which the code you posted does not work? Or, better, could you make a Playground that shows your scenario in action? It’ll be much easier to help you figure out what’s going on if we can see what isn’t working directly. Thanks!

There’s a construction parameter when you make an engine called adaptDeviceRatio:
Engine | Babylon.js Documentation (

It doesn’t pick up on if you switch screens, but you can listen in on resize events and that usually picks those up. My previous S8 android I think actually had a 1.5 ratio! If you look in the code you will see these kinds of snippets:

this._hardwareScalingLevel = adaptToDeviceRatio ? 1.0 / Math.min(limitDeviceRatio, devicePixelRatio) : 1.0;

I think you want 1.0/window.devicePixelRatio

1 Like

Hi again,

thank you all for your suggestions.

The issue I was facing by setting an only (high resolution) hardwareScalingLevel value for all devices was that the GUI in Retina/retina/HDPIs displays was becoming too small and on no-retina displays too big.

The goal was to scale the GUI dimension (and global resolution) to a certain value for retina/HDPI displays (without compromising performances) and to another value for no-HDPI displays.

So in order to set different scaling parameters for various pixel ratios, I finally made it simpler as follow:

        const pixelRatio = window.devicePixelRatio;

        if ( pixelRatio >= 1) {
            scalingValue = 1.6 ;  // HDPI displays
        else {
            scalingValue = 1.2;   // no-HDPI displays

        engine.setHardwareScalingLevel(scalingValue / pixelRatio);

I just tried on retina and normal displays and works perfect. I will try as well with other HDPI devices (@brianzinn like some android phones) and in case add other conditions to have all cases right.

Thanks again all for the support!