[Interest] Managing phone and tablet versions of the same application

[Imaginando]

Hi,

I got to the point in which I need to have two different styles depending on the running device: phone or tablet. 

What is the best way to handle this? I’m doing it in a way that doesn’t seem the cleanest approach:

First, on my main Qml file I calculate the screen size and a scaling factor:

onWidthChanged: deviceScreenSize()
onHeightChanged: deviceScreenSize()

function deviceScreenSize()
{
    var size = Math.round(Math.sqrt(width*width+height*height)/Screen.pixelDensity/25.4)

    var screenSizeMin
    var screenSizeMax
    var scaleFactorMin
    var scaleFactorMax

    if (size>=7)
    {
        screenSizeMin=7
        screenSizeMax=12.2
        scaleFactorMin=0.75
        scaleFactorMax=1.25
        deviceType=Controller.Tablet
    }
    else
    {
        screenSizeMin=4
        screenSizeMax=7
        scaleFactorMin=0.75
        scaleFactorMax=1.25
        deviceType=Controller.Phone
    }

    scaleFactor = scaleFactorMin+((size-screenSizeMin)/(screenSizeMax-screenSizeMin))*(scaleFactorMax-scaleFactorMin)
}

function mmToPx(measure)
{
    return Math.round(Screen.pixelDensity)*measure*scaleFactor
}

Then, across my whole code, for each property that matter I check if deviceType is tablet or phone and I give the respective measure depending on it.

Example: 

Image {
    id: menuIconImage
    anchors.fill: parent
    anchors.margins: window.deviceType?window.mmToPx(2):window.mmToPx(1)
    source: "qrc:/images/icon_menu.png"
}

I think this will be hard to maintain in no time. A quick google for “Qml styling” showed me this:

https://wiki.qt.io/QmlStyling <https://wiki.qt.io/QmlStyling>

Is this still valid? Is there any more recent resource for styling?

Can someone share it’s own approaches to this problem?

Thanks,

Regards,

Nuno
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20150526/4d16f979/attachment.html>