Responsive design device dimensions

With QuickHMI, you can easily adapt your visualisation for different devices. The editor provides you with 3 different layouts (small, medium, large) in which you can optimise the arrangement of control elements for display on different screen widths, among other things.

QuickHMI uses so-called media queries to select an appropriate layout. A media query works by defining a specific minimum width from which a layout is to be used in QuickHMI. By default, these are defined in QuickHMI as 200 pixels for the small layout, 1,000 pixels for the medium layout and 1,800 pixels for the large layout. These values can be changed according to your requirements in the project settings.

However, these are logical pixels that CSS and web content work with. CSS pixels are not necessarily the same as device pixels (the actual resolution of your device). CSS pixel density is usually specified as 96 dots per inch (DPI), but can vary depending on the device and display settings.

The logical width of the current device is displayed above (please ensure that the page is displayed in full screen). You can enter this value in QuickHMI to set a specific layout to this size.