Making front-end devs life so much harder with the 125% dpi scaling? Why?
Hi there,
I was wondering why would you make FireFox scale 125% based on Windows scaling? Like I "sort of" understand why and I know how to fix it for my browser but as a front-end developer, I can't ask every users to change their windows settings?! I've always used FireFox to develop but now it's just super annoying. If you could of, at least, wait for Chrome to do the same kind of scaling it would be fine but only Firefox is just pure madness for us.
I can't seem to find a fix anywhere, so I guess there is none at the moment?
All Replies (6)
Sorry you will not find Developers over here.
That was a deliberate change three years back in Fx22
I remember it causing a few issues initially, but everyone seemed to get used to it I thought.
Trying to find official blogs about it all come across now is a short paragraph
https://blog.mozilla.org/futurereleases/2013/05/16/test-all-webrtc-features-in-firefox-beta/
HiDPI support for Windows: For Windows users, Firefox Beta includes HiDPI support. Firefox Beta now follows Windows’ display scaling options to render text larger on high resolution displays.
If you want to try to find somewhere to discuss that pleas head over to the Mozilla fora
Hi collinpage, is the problem that you think users don't know how to use zoom if your page is "too large" for them, or that too often your layout switches from desktop to mobile?
You could detect whether a Firefox user has smaller-than-expected screen dimensions and a higher-than-96ppi zoom, and provide some help text to them in that case. Here's a sample page to play with showing the interaction of the default scaling and zoom: http://dev.jeffersonscher.com/resolution.html
jscher2000 said
Hi collinpage, is the problem that you think users don't know how to use zoom if your page is "too large" for them, or that too often your layout switches from desktop to mobile? You could detect whether a Firefox user has smaller-than-expected screen dimensions and a higher-than-96ppi zoom, and provide some help text to them in that case. Here's a sample page to play with showing the interaction of the default scaling and zoom: http://dev.jeffersonscher.com/resolution.html
No, my problem is that Firefox now zooms a website based on the users dpi scaling (on Windows, not sure for the rest). The problem with that is that Chrome doesn't. If you build responsive websites it doesn't affect you but sometimes you have clients with little budgets that can't afford a responsive site so they want a static width. So a width of 100px on Chrome is going to appear as 125px on Firefox (125% zoom since Windows is set to by default to 125 dpi scaling). As a developer, when building a static site, I can't possibly ask all the users to turn down Windows dpi scaling and I can't seem to find a hack to zoom out the page on Firefox IF Windows is set to 125dpi.
I wonder if social engineering works? Put a full width sentence in a header and the users on Windows Firefox will zoom out to read it. Firefox remembers zoom settings on a per site basis so they will always see that site at the optimal zoomed out setting whenever they revisit it.
I do not do web design, but had hoped Jscher2000's sample page may have helped.
collinpage said
... sometimes you have clients with little budgets that can't afford a responsive site so they want a static width. So a width of 100px on Chrome is going to appear as 125px on Firefox (125% zoom since Windows is set to by default to 125 dpi scaling). As a developer, when building a static site, I can't possibly ask all the users to turn down Windows dpi scaling and I can't seem to find a hack to zoom out the page on Firefox IF Windows is set to 125dpi.
A Windows "text size" of 125% is detected as 120dpi in Firefox.
I think what the client needs to appreciate is that if the text is too small, the user most likely is going to zoom to enlarge it anyway. On the other hand, yes, a 1024px layout may be too wide for some displays and the user will need to zoom "out"; that's a case for some user education or perhaps an "anti-zoom" script of some kind.
Here's an example of an anti-zoom script:
https://jeffersonscher.com/res/counterzoom.html
Very imperfect, but one possible option (note that there is a large bottom "margin" caused by shrinking the contents of the original box, which would affect any footer that follows).