[RichardOne]

Hi,

How do I make my app appear correctly on both mobile and tablet?

I have tried auto settings with no result?

Would appreciate some pointers 🙂

[Brandon]

This is a good place to start: http://www.genuitec.com/mobile/docs/advancedUIDesign/advancedUIDesign.html

It can be kind of tricky to get use to at first.

[RichardOne]

Hi Cindy,

Your not kidding, tried all sorts of ‘resize’ which didn’t work, images and text out of proportion etc. Driving me mad…

[Unknown Author]

Auto-resize is, frankly, very difficult to use and unreliable. I make mine appear correctly by rolling two versions (iphone 4 and iphone 5) into one compilation, which is chosen at startup based on screen size. You can do the same thing, based on screen size. The homescreen is just a blank screen, before the jump to the screen-size-specific version.

phoneui.documentReadyHandler = function() {

n=window.screen.height;

if (n < 500)
 {
  phoneui.gotoPage('m1-HomeScreen_iphone4', 'NONE');}
if (n > 500)
 {
  phoneui.gotoPage('m1-HomeScreen_iphone5', 'NONE');}
}

[RichardOne]

Hi,

Thanks for that,

Still learning – Where do you add this code?

[paulD]

Hi Richard, i agree with 1thinchip his approach is by far the best. I tend to have 2 designs one for iphone 4/5 and another for IPAD rolled into one app using this method. The screen size is just too different to get a good design. This way i can be a lot more flexible with things like animation’s and page layout.

I have got used to using the autoresize options over the time I’ve been using M1. At first it was very frustrating, but now I’ve got a good understanding of its implementation and how best to use it. Its not perfect by any means and there is a element of trial and error but having tried some of the other app makers which use grids i realised how much easier and flexible it is! The key thing is to use panels as parent containers for your screen content and utilise the auto resize controls between panels.

As for 1thinchips approach, start you project with a blank page and enable the start page options. This will be your apps landing page. Generate your app and use the custom.js file to house all the code for your project. Use the code in this post to link to your other pages, which will be your real start pages for you app.

Paul

[Unknown Author]

Choosing a screen-size-appropriate page is also helpful when you need an element (a button, an image) to be at the bottom of a page. The “bottom” changes as screen size changes, so showing the user a screen specifically for his device is the best approach.

-1TC

[Author]

Posts