Resolution Independence (Qt, Android, iOS, BB10)

April 12, 2016 — Leave a comment

Qt High DPI

Since Qt 5.6 HighDPI is supported for all platforms. All details here: http://blog.qt.io/blog/2016/01/26/high-dpi-support-in-qt-5-6/

Read more about Qt 5.6+ scalability: http://doc.qt.io/qt-5/scalability.html

Also new Qt Quick 2 Controls (qt.labs.controls in Qt 5.6) support High DPI : https://doc-snapshots.qt.io/qt5-5.6/qtlabscontrols-highdpi.html

Enable High DPI Support

To enable High DPI Support you must enable Qt::AA_EnableHighDpiScaling :

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling); // <--
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

Device Pixel Ratio (Scaling Factor)

In Qt from display density (dpi) a scaling factor was calculated, where 160 dpi is scaling factor 1.

You can easy test this for your devices:

	qDebug() << qApp->primaryScreen()->devicePixelRatio();

For my two devices I got:

  • Android (PRIV), 540 dpi –> scaling factor: 3.5
  • iOS (iPhone 6S), 326 dpi –> scaling factor: 2.0

Use Pixels in QML

UI is defined in QML and all sizes, coordinates, … are in pixels. This is how Qt worked all the 20+ years.

Now with High DPI enabled the pixels are density-independent. Let’s take a look at the iPhone with Device Pixel Ratio 2.0

iPhone 6S has 750 x 1334 with 326 dpi. Let’s check the size:

	qDebug() << qApp->primaryScreen()->size();
	// we get: QSize(375, 667)

we get 375 x 667. So using a width of 120 will be calculated as 120 * 2.0 = 240 px

let’s compare this with other platforms:

Android Device Independent Pixels (dip / dp)

Android does it similar: Device Independent Pixels are 1:1 for 160 dpi (mdpi)

Android uses a set of generalized densities:

  • ldpi (low) ~120dpi –> scaling factor: 0.7
  • mdpi (medium) ~160dpi –> scaling factor: 1.0
  • hdpi (high) ~240dpi –> scaling factor: 1.5
  • xhdpi (extra-high) ~320dpi –> scaling factor: 2.0
  • xxhdpi (extra-extra-high) ~480dpi –> scaling factor: 3.0
  • xxxhdpi (extra-extra-extra-high) ~640dpi –> scaling factor: 4.0

Read more in detail here: http://developer.android.com/guide/practices/screens_support.html

As you can see Android also has a baseline at 160 dpi, so it’s the same as with Qt.

iOS Points and Pixels

What about iOS ? Coordinates and sizes are defined in points.

And it’s the same as for Android and Qt: At a density of 160 dpi the scaling factor is 1.

Take a look at http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions to compare all the sizes, pixels and points.

As you can see the iPhone 6 has 375 x 667 points for 750 x 1334 pixels – same as with Qt.

BlackBerry 10 Design Units (du)

Since OS 10.3 BlackBerry 10 also is resolution independent: https://developer.blackberry.com/native/documentation/best_practices/resolution/

BB10 uses Design Units (du) and groups the devices:

  • BlackBerry Classic (720×720), 294 dpi –> 8 pixel per du
  • BlackBerry Z30 (720 x 1280), 295 dpi –> 8 pixel per du
  • BlackBerry Passport (1440 x 1440), 453 dpi –> 12 pixel per du

Coming from BlackBerry 10 development, you have to rethink / recalculate your dimensions.

There will be more articles about Icons, Images, Orientation, … stay tuned


← Back (Qt Quick Controls 2)

→ Next Article (Our first demo app)

⇐ Home (Overview / Topics)


 

No Comments

Be the first to start the conversation!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s