Xpages apps & my aspect ratio tip#

So we are all moving towards XPages and some of us even writing mobile apps ..maybe even on Unplugged ;-)

One gotcha I discovered this weekend, whilst working on a new Health and Safety app, was the iPad not rendering the correct background images and other controls that I had set for when the user switches from landscape to portrait (although it appears that portrait to landscape works fine).

My CSS included the usual syntax:

@media screen and (orientation: landscape){

... some CSS

}

@media screen and (orientation: landscape){

... some CSS

}

But whenever I changed from landscape to portrait, images looked stretched and buttons were not quite where I expected them to be. Even changing the CSS to:

@media screen and (max-device-width: 999px){

... some CSS

}

Did not resolve this. Erk.....

After a while (and furious testing/language) I saw that I had omitted, from my <xp:this.resources>  tag, the (very) important:

<xp:metaData name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"></xp:metaData>

This is crucial for iOS development as without this resource; Mobile Safari defaults to a portrait width of 980px and zooms content out accordingly. Thus for my iPad 2, with its screen width of 786px wide, the content was being stretched to the full viewport of 980px; off the screen.

So if you find you are having orientation issues when designing mobile XPages, ensure this tag is included before you start hacking your CSS ;-)

You can change the scaling parameters to suit your needs and the full documentation for the Apple Meta Tags are here - https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Comments

[Dorette]

When previewing my UnpMain xpage on Safari or Chrome it displays correctly, but when opening it on unplugged shows only the 3rd Mobile Page that I have created on my xpage and not the selected mobile page as specified in the single page application as specified. Double checked settings on setup and everythings seems to be in order. What am I doing wrong? (iPhone 4S)

[Rich Sharpe]

Hi. It sounds like you may be using the Single Page App method as described in may Mobile Controls resources.
The Mobile Controls in Xpages are not supported in Unplugged.
This methodology is designed to pre-load pages in memory to reduce the round trip time so the user has a better experience. As all data on Unplugged is local (on the device) this is not required so you can use separate XPages, one for each screen.