- This topic has 7 replies, 3 voices, and was last updated 12 years, 2 months ago by
.
-
Posts
-
I had a working, published iphone 4 application. I installed the 2.2 with iphone 5 support. I did view-iphone 5 and the screen is obviously longer. I made my background larger to accommodate and moved some objects down. Looks fine in the iphone 5 emulator. Looks truncated on an iphone 4. Is there a way to make the “Best of Both Worlds” and take advantage of the new screen size without having it look bad on older devices?
I’m in the same boat. I’ve chosen to show pages based on screen size, i.e., having an iphone 4 version and an iphone 5 version rolled into one app. What is shown is controlled by Javascript and based on screensize.
That’s an interesting idea. Would you mind sharing the script and how you implemented it? Appreciate the suggestion
This is the approach I’ve taken to updating two apps so far and seems to work with no problems.
1. Create a Homepage.mobi file that is a solid color background – the same solid color as your loadscreen.
2. Include Homepage_iphone4.mobi and Homepage_iphone5.mobi in the project (bottom of the properties for Homepage.mobi).
3. In Hompage_custom.js, do this:
phoneui.documentReadyHandler = function() { n=window.screen.height; if (n < 500) { phoneui.gotoPage('m1-Homepage_iphone4', 'NONE');} if (n > 500) { phoneui.gotoPage('m1-Homepage_iphone5', 'NONE');} }You are now free to create two seperate versions of your app and roll them into one compilation.
-1TC
@1thinchip
Interesting. I was wondering when someone would get clever with the ability merge in other screens. 🙂
If you regenerate your app using MobiOne 2.2 and the screens use scrolling panels and auto-resize properties then it seems that most UI’s should be flexible to fit the taller iphone5 and shorter pre-iphone5 display heights. Is there an example smartphone UI that you believe requires 2 different screen layouts that some one could post for me to review?
Without posting any code right now (since I’m on my way out the door to my “real” job…), I can tell you my three app scenarios so far.
1. This app:
http://itunes.apple.com/us/app/dod-systems-engineering-process/id505317207?mt=8
In the first screenshot, see that little cog graphic on the bottom right. It links to a disclaimer page. In iPhone 5, it’s hanging in space, rather than being a little thing in the corner. The iPhone 5 screen has this link as a list item, since there’s now screen space for it. In this app, this is the only change to the app screens, so I have JavaScript not only to select the initial homescreen, but _also_ to choose homescreen for those pages that link back to the homescreen.
2. This app:
http://itunes.apple.com/us/app/basic-math-rules/id536941115?mt=8
In this app, everything is lined up to be in the middle of the screen. For those screens like the last screenshot, the title was no longer aligned with the graphics under it in iPhone 5. To keep the app looking good (i.e., symmetrical), I have two completely seperate versions. In the iPhone 5 version, all of the content is nudged to the right by 30 pixels.
3. This app:
http://itunes.apple.com/us/app/my-comic-books/id528886127?mt=8
In this app, there are buttons deliberately placed at the bottom of the screen. In iPhone 5, these buttons would be hanging in space. Also, iPhone 5 is an opportunity to increase the size of the screen dedicated to user-input information.
Will try to post some screenshots soon.
-1TC
