One of the tricks I use is to set all dimensions in milimeters instead of pixels, something like this:
property real mm: Screen.pixelDensity
property real btnSize: 8 * mm
Rectangle {
width: btnSize
height: btnSize
}
This, in a perfect world, would give you a rectangle with the same size in devices with different pixel density. But please note that Screen.pixelDensity is the QML version of the c++ QScreen.physicalDotsPerInch, wich according the docs:
"This value represents the pixel density on the screen's display. Depending on what information the underlying system provides the value might not be entirely accurate". My experience shows that in laptops and screen monitors que values are very good, you can measure the screen with a ruler and check that the rectangle is 8mm, however I have had bad experiences in mobile android devices, probably because of poor screen/drivers quality. So I usually in my applications I do something like:
property real calibrationFactor: 1.0
property real mm: Screen.pixelDensity * calibrationFactor
where calibrationFactor is a value that the user can change in some Settins menu to "calibrate" the overall size of the buttons/elements of the app.
Also there's more than this to do a one size fits all screens app. Usually there's a all lot of tricks like trying to find the screen dimension and loading different UI's at run time, or using flickable elements and listview elements that can scale up more or less ok with different screen sizes.
ALso check this very interesting video https://www.youtube.com/watch?v=nNyhsdX6BsI&list=PLizsthdRd0YwgXOHoXxBrIEgBdzACclcg&index=3
