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

[Nuno Santos]

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


Nuno Santos
Founder / CEO / CTO
www.imaginando.pt
+351 91 621 69 62


_______________________________________________
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest