[Max87]

Hi guys,
I recently bought new iPhone 5 and wanted to update my apps for this display.
But I have big problem – I have icons in screen positioned under scrollable panel. In iphone 4/4s, it’s fine, but when I test it for iPhone 5 in test center, icons are in that panel, not under it.
So I tried to move them – in iPhone 5 is great, but in iPhone 4 icons are not visible.
I tried test it in Test Center.
Can you please help me how to place my icons, so they will be showed on both iPhones?
Thank you

edit: my problem is not only icons-related, but whole graphics is messed up

[support-octavio]

@Max87,

I think this is related due a bad configuration in the auto-resize property of your widgets, could you try put your icons in a panel and config the auto-resize property as next image:

Attachments:

You must be logged in to view attached files.

[Unknown Author]

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');}
}

[Max87]

2Octavio: thanks for advice, it’s partialy working, I have to edit every widget on every screen I created.
1thinchip: thanks for your advice too, if I want to use your solution, I’ll have to program every function twice(if I change the name of screen, widgets name changes too, so my functions won’t work).

[Brandon]

Max,
You can use a variable to make the screen name dynamic sort of like this:

var myScreen = “home”;

then use it in the functions: ‘#m1-‘+myScreen+’-widget’

I did this for my music player so I didnt have to program seperate functions for each playlist screen.

[Unknown Author]

Max: You’re right. My solution provides guarenteed visual layouts. Isn’t that what counts – the best user experience possible? If you’re too lazy or your fingers will not bring you to copy and paste code, then please don’t complain that your app looks lousy.

[Max87]

You’re right – every developer should offer app with great user experience and great gui.
But – my problem is not that I have creepy GUI – I bought iP5 recently and determine, that my gui is showing wrong on this device. In past, I had not a problem, because I tested on iP4 and 4s(that’s my mistake, I know).
My problem is about bad settings for widgets, I needed advice how to fix iP5 view problem, not to rewrite my whole app from
scratch

[support-michael]

Hi Max,

You are moving in the right direction to enable a mobile web UI designed for a smaller display (iphone4/s, 320×480) to render rescaled to a larger display (iphone 5, 320×568). The main diff on these 2 devices from an HTML5 App design perspective is the iphone5 display is taller by about 88 pixels. Given that, I suspect your UI needs additional the auto-resize properties set for some or all of your UI widgets to layout vertical in a more flexibly manner.

Typically look for any widgets that need to anchor to the bottom or the screen and ensure that their auto-resize settings are set to pin the widget to a specific location relative to the bottom edge. Do the same for widgets that must be positioned relative to the top of the screen. In some cases if you have widgets floating apart in an odd manner across devices with different display sizes then you may need to consider using a panel to apply a very specific layout that does not resize or does so very specifically.

If you post additional screenshots we might be able to specific suggestions.

[Author]

Posts