How to handle windows zoom?

[phifuh]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

-

Description

We noticed that some users are using windows zoom of 125/150%, the question is, is it just scalable with a responsive layout or are there some naitive tipps and tricks to force 100%?

NiceGUI Version

3.8

Python Version

3.13

Browser

Chrome

Operating System

Windows

Additional Context

No response

[falkoschindler]

Hi @phifuh,
Since I'm not familiar with Windows and its zoom setting, I asked Claude about it:

---

This is a general web/browser topic rather than something NiceGUI-specific. Since NiceGUI renders in a browser (or webview), Windows display scaling (125%, 150%) affects your app the same way it affects any website.

The recommended approach is responsive design:

• Use relative units (rem, %, fr) instead of fixed pixel values.
• Leverage Tailwind and Quasar responsive classes — they handle varying viewport sizes and zoom levels gracefully.

Forcing 100% zoom is not recommended (and largely not possible):

• Browsers intentionally prevent websites from overriding the user's zoom/scaling preference — it's an accessibility feature.
• CSS workarounds like zoom or transform: scale() can technically counteract it, but they fight the user's OS settings and often cause layout issues.

In short: if your layout breaks at 125%/150%, that's a sign it relies on fixed pixel sizes. Switching to relative/responsive units is the proper fix and will make your app work well at any zoom level.