recently I stumbled about kinda… problem.
I wanted to have the browser bars and tabs in firefox being bigger with a bigger font size.
After some research I got to the firefox layout.css.devPixelsPerPx option and changed the value from 1 to 1.5 .
By doing so the browser bars and the tabs became bigger but unfortunetly the visual appearance within the browser window changed, too.
What I mean is that the position of meshes and html- huds also change when users use an individual parameter as layout.css.devPixelsPerPx which may be named different in other browsers. The size of overlayed html also changed with this option.
Does anyone of you take this into consideration when designing 3d- scenes and if so how do you do that?
I’m not familiar with this setting and it doesn’t look like there’s any documentation for it online (or at least, I couldn’t find any).
However, it looks like it’s changing the font scaling and users sometimes change this to get around website having tiny text on high DPI displays. Also, you can leave it set to -1 to use system wide font scaling, which seems like a better idea.
It’s hard to say without seeing any code, but I would say that your website should display correctly no matter what you set this value to (within reason) and if your layout is broken by changing it then you will need to update your CSS so that your site looks correct in both cases - only the size of the font should change.
As far as I can see, it shouldn’t make any difference to the actual 3D scene beyond changing the position/size of the canvas element. Correct me if I’m wrong, but in this case it’s not something we can help you with here. The problem is in your CSS and Stackoverflow might be a better place to ask.