How do I scale my app for different screen sizes?

[David K]

Hi,

Great stuff with Mobile App Builder! The ease to test apps is amazing!

I am testing on an Android Samsung Galaxy SII which has a screen size of:
800×480 px... and I am wondering how to have my app scale to different screen sizes using Tiggr Mobile App Builder?

Viewing my app in the Samsung everything is super small, and is not consistent with testing on my desktop/laptop machines or how it looks in the builder/editor views...

Is the screen size fixed per app? Or would I use custom javascript to scale based on the device/screensize? Does Tiggr MAB have this functionality built in?

Also, if I design for a smaller screen than say what this Galaxy SII has which is larger say - what is happening? It is just staying same size, thus looks smaller?

thanks in advance,

best -

David

[maxkatz]

Glad you like the builder!

A couple of things:

For native apps, the screen is scaled (using PhoneGap zoom) to actual device screen size.

For mobile Web, the app should adjust to the screen size automatically as well.

Lastly, in screen properties, you can select your screen size.

Hope this helps...

[David K]

Thanks Max.

I believe I am working on a native app...

So I imagine it is a matter of best practice somewhat in terms of designing screen for smaller resolutions and having it scale up or vice a versa?

I did have my app set to a smaller resolution, and now I changed it to 480x800 and then adjusting some font heights, things are larger...

Though, how do you make the choices font larger in a LIST object? I don't see font size settings and that object coming up even on screen in the builder looks small - at any resolution setting...

Same thing for buttons, is there a way to change the font size of the text inside the buttons?

So, the project screen setting sets the default and then each page can have its own setting that overrides the default?

thanks,

David

[maxkatz]

In general, the component should be resized based on screen size.

If you need to make the button or list text larger, the easiest way right now is to do it via custom CSS. For example, using this on page load:

code
$('.ui-btn').css('font-size','24px');
/code

will give you this:
http://gotiggr.com/preview/23750/

We are working on adding features to make these and other UI changes much simpler.

[RichardGolko]

Would be great to use a stylesheet so for example a button text, size, background image whatever can be set once... and all buttons use it, but can be overridden for a specific button like normal css can by appllying it only to the element. Right now every button has to e modified with the class info. There should be a default class for every main element on the screen and one css file.

[maxkatz]

You can create a new theme to do that.

[Jose Munoz]

I am having a similar problem. I am building a web app but the images are not re-scaling. All of my icons and buttons are tiny making it difficult to navigate when on smaller devices like smartphone, ipod, iphone. When on tablets all is well.. Please help. http://munoz.app.appery.io

[Illya Stepanov]

Hi - can you provide some screen shots? I've tested on iPhone 4 can't see any tiny elements in UI.

[Kateryna Grynko]

Hi Jose,

To change the size of icons, depending on the screen size you should make it relative.
On Page Load event add Run JavaScript action with the following code:
codeAppery('mobileimage_1').css('width', '25%');
Appery('mobileimage_1').css('height', '25%');/code
where mobileimage_1 - is the image name, and 25% is the required size.
Note that this change will be visible only in preview mode, and in the final application.

[Jose Munoz]

here you go these were taken from my galaxy II but I get something similar with iphone and ipod. To see them well the screen has to be stretched