BlueWaveTechnologies / BlueWave

Web application used to create charts and dashboards using a graph database
MIT License
5 stars 3 forks source link

Warn Users When Browser is not 100% Zoom #307

Open pborissow opened 1 year ago

pborissow commented 1 year ago

We have observed unusual behavior in drawflow and some D3 components when the browser zoom level is not set to 100% or when the device display resolution is set to something other than 100%.

At the time of this writing, it is not possible to detect the browser zoom level however we can detect the device display resolution. At a minimum, we should display a warning message to users to adjust their device resolution.

Here's an example, of how to detect device display resolution:

var browserZoomLevel = Math.round(window.devicePixelRatio * 100); 
if (browserZoomLevel !== 100){ 
    alert("We have detected an unusual pixel ratio for your device. Please ensure your browser zoom is set to 100%."); 
}; 

On Windows, device resolution can be adjusted via settings. Example:

image

Browser zoom, is defined differently in each browser. Here's an example from Chrome:

image