how to design a app that responsive in all devices android, ios,windows,linux?

stackprogramer

my problem is when i set a picture with width:100 and height :100 in Qml in diffrent device is not same,its bad.
so i uses this types.

 minimumHeight:Screen.desktopAvailableHeight/1.2
    maximumHeight: Screen.desktopAvailableHeight/1.2
    minimumWidth: Screen.desktopAvailableHeight/2
    maximumWidth: Screen.desktopAvailableHeight/2
    x: (Screen.desktopAvailableWidth-width)/2

so it improved but if the screenLCD of device is more big or more small it converted to width LCD screen,it reduced quality. so i go to SVG picture,my question is if i use SVG,after i build the app,it use SVG or the image with format png,jpg?
what happens for quality?
for different device it should not reduce quality?because i use SVG format.but really its true in Qt.
my second quenstion is how i work width scale dpi,dp android (i use this scale in java android apps)in Qt?

Charby

this KDab article should helps : http://www.kdab.com/scalable-uis-qml/

johngod

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