Style sheets / Qt Designer support for high dpi screens?

Question

Today I have ported my application from Qt5.5 to Qt5.6RC. Running it on my high dpi screen the widgets appeared tiny. After reading this and setting QT_AUTO_SCREEN_SCALE_FACTOR to "1" at least it is usable again.

However they say:

In the longer term, the application should be adapted to run unmodified:

1) Always use the qreal versions of the QPainter drawing API.
2) Size windows and dialogs in relation to the screen size.
3) Replace hard-coded sizes in layouts and drawing code by values calculated from font metrics or screen size.

Not all style sheet attributes support em (".. from font metrics"). No idea how I would use "screen size" relative in style sheets. Also Qt Designer only supports px in many places, like shown below.

Considered I do not want to give up designer and stylesheets, what are my options to create genuine Qt hires applications?

---

Related (but no answer to my question)

• It is even a bit unclear what 1em means in the Qt world: What does size "1em" in Qt qss mean, if there is no font size em?
• Qt and high dpi screens
• QT High DPI Support on Windows

Abner

Any Solution yet? I am facing similar issue and thinking to implement what has been suggested in the answer. – Exosmosis

Answer 1

If you're really sold on using the Designer, perhaps consider updating Stylesheets programmatically. This is a really hacky fix I implemented in an app I had to deploy across multiple platforms. This would mean using px measurements for everything, as it is the only widely supported measurement.

As you may know, Qt fonts do not support 'screen-size' relative em units:

From Qt5 documentation: https://doc.qt.io/qt-5/stylesheet-reference.html Qt is limited to font sizes in pt and px and any other size must be in px, em or ex.

Whichever monitor and its specifications you've developed a UI you are happy with will become the standard for your application. In the constructor of your windows, you can calculate a scale factor as the new device's DPI divided by the 'standard DPI' that you know your application looks good on. From there, you simply would need to multiply your widgets/fonts stylesheets by that scale factor. It may sound cumbersome (and it definitely is), but this would mean iterating through the QString returned by ui->myWidget->getStyleSheet() and scaling all number instances preceding a px substring.

This worked for me in scaling up/down fonts and widget sizes, but with obviously added overhead. I too also really like the simplicity of using the Designer but, afaik, creating scalable UI's remains difficult in Designer. Making the switch to programmatically designing UI's ended up replacing my hacky fix for my application.

Note: It is also important to look out for what fonts you're using. If your font is not a System-supported font, the px value will have unexpected behaviour, since a default font will replace it.

Hans

I am planning to achieve this for my Application. Can you provide us some code? You have better alternative now? – Exosmosis