Checking Application Layout

For the best possible user experience, you should optimize the layout and UI for the screen sizes of the target devices. Carefully consider what is the appropriate amount of content to present on the application UI for a mobile phone, tablet, or any other target device.

Relate the position and size of components to the dimensions of the display. This enables the same set of information to be presented on the screen in all resolutions; higher resolution devices just display finer graphics.

Change the settings in the Model view to check application layout.

"Model settings"

Changing Device Models

The characteristics of your target devices, such as screen size and orientation, touch support, and the availability of a keyboard or home screen, affect application design.

The Device field displays the device type that is being emulated.

Device manufacturers and application stores might have their own usability criteria for applications.

Rotating Devices

Rotation changes the orientation of the primary display between portrait and landscape. Rotation is effected by a sensor.

By default, all applications can present in portrait or landscape orientation. Based on the product, one orientation is considered dominant. If the target devices require that applications support both orientations, ensure that your application layout is properly usable in them.

Applications can auto-rotate the screen according to the current device orientation or lock the screen into a particular orientation. The UI orientation field displays the supported orientations for the device model. Click the rotation buttons to change the orientation of the emulated device.

Changing Screen Resolution

In addition to the display size in pixels, physical screen dimensions have an impact on designs. Devices with the same size display can vary in physical dimensions and, consequently, in screen resolution. The implications are most obvious on images, particularly on those that contain graphic text or fine details. For example, on devices that share a 240-pixel screen width, a logo that is legible at 154 pixels per inch may be somewhat less so at 199 pixels per inch.

You can use the emulator to ensure that screens designed on a large computer monitor are suitable once transferred to a device and that critical visual elements remain legible at all supported screen sizes.

Move the Zoom slider to the left to scale the device to its real size and to the right to make each device pixel correspond to a pixel on the screen. However, Windows always reports the DPI of the screen as 96 pixels per inch, and therefore, the emulator cannot reliably detect the DPI of the screen. The same problem might arise on some Linux systems that use a fixed value for the DPI.

Click the Configure DPI Correction button to make the Native size setting match the real size of the device. In the Configuration dialog, you can use the following approaches to scale the screen to the correct size:

  • In the Diagonal in inches field, enter the diagonal of the display in inches.
  • In the Manual Correction group, place a ruler next to the line, and then move the slider to the 10 centimeter or 4 inch mark on the ruler.
  • In the Correction Factor field, enter a value to scale the screen. This value is adjusted automatically when you edit the other fields.

© 2018 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.