Skip to main content link. Accesskey S

The useful resource for IBM Lotus Domino XPages development

Submit Search


Home > Mobile > Developing for an iPhone or iPad
xpageswiki.com
is maintained by 
Julian Buss.
You can hire me.

Developing for an iPhone or iPad

ShowTable of Contents

Tell the iPhone to use a fixed screen size


Found by Mark Hughes.

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />


iPhone display is 480x320 pixel. The iPhone browser viewport is 320x356 (landscape) and 480x208 (portrait).

Set a web app to fullscreen (standalone app)


set the following meta tag to enable fullscreen mode when the user saved the URL of your app to his home screen (then your app looks like it is a standalone app):

<meta name=”apple-mobile-web-app-capable” content=”yes” />


Note that in that mode any link is opened in a new safari browser window. Your app needs to load all new stuff via Ajax calls, do not use separate XPages.

You can check for this meta tag using the following javascript:

window.navigator.standalone

(it returns true if the meta tag was set).

You can control the color of the topmost status bar with this meta tag:

<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />


You can set an icon used for the device's home screen:

<link rel=”apple-touch-icon” href=”apple-touch-icon.png” />

(Size 57x57 pixels, format PNG. It is recommended to name the icon 'apple-touch-icon.png'.)

You can set a 'splash screen', that means an image that is displayed while the app (web page) is loaded:

<link rel=”apple-touch-startup-image” href=”default.png” />


Note: it seems that at least for the iPad the image needs to be named "default.png". The image needs to have exactly the dimensions 768x1004 (yes, that's 1004, not 1024).

Use css files


When including a CSS via theme the iPhone seems to not "see" it.
To use an external CSS file for all browsers and iPhone, include it as follows:

<xp:linkResource
			href="app.css"
			rel="stylesheet"
			media="screen"
			type="text/css">
		</xp:linkResource>


And to add a special CSS for iPhone only, use this:

<xp:linkResource
			href="iphone.css"
			rel="stylesheet"
			media="only screen and (max-device-width: 480px)"
			type="text/css">
		</xp:linkResource>



iOS understands a lot of special CSS, see http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html for more.

Fonts in iPhone and iPad


The following fonts are available:


AmericanTypewriter, AmericanTypewriterBold
Arial, ArialBold, ArialBoldItalic, ArialItalic, ArialRoundedMTBold
Helvetica, HelveticaBold, HelveticaBoldOblique, HelveticaOblique
MarkerFeltThin
TimesNewRoman, TimesNewRomanBold, TimesNewRomanBoldItalic, TimesNewRomanItalic
CourierNew, CourierNewBold, CourierNewBoldItalic, CourierNewItalic
Georgia, GeorgiaBold, GeorgiaBoldItalic, GeorgiaItalic
TrebuchetMS, TrebuchetMSBold, TrebuchetMSBoldItalic, TrebuchetMSItalic,
Verdana, VerdanaBold, VerdanaBoldItalic, VerdanaItalic
Zapfino

Prevent scrolling


Normally, a user can drag the viewport of the browser window around. This on the other hand prevents you from providing a fixed layout with a navigator on top or so.
You can prevent this behaviour as follows:

<script>
var touchmove = function(e) {
		e.preventDefault()
}
XSP.addOnLoad(function(){
var body = dojo.query("body")[0];	
body.addEventListener("touchmove", touchmove, false);
})
</script>

Execute script if orientation changes


A user can rotate the device, which triggers a javascript event:

var onOrientationChange = function(){
alert("new orientation is: "+window.orientation);
}

XSP.addOnLoad(function(){
dojo.connect(null, "onorientationchange",null, onOrientationChange);
})


window.orientation returns the following values:

0 = portrait
90 = landscape with home button on the right
-90 = landscape with home button on the left

set type to input fields


By setting a type to input fields the iPhone offers an optimized keyboard for those fields.
Example:

<input type="url"/>


Important types:
  • email
  • url
  • number


More at:
http://www.bennadel.com/blog/1721-Default-To-The-Numeric-Email-And-URL-Keyboards-On-The-iPhone.htm
Building Websites optimized for iPhone and Android

Link to a phone number


iPhone users can touch this link and call the number:

<a href="tel:040123456">call me</a>

iPhone example


By Mark Hughes, see here

Prevent user selection on certain elements


add css:

-webkit-user-select: none;

Prevent caching of ajax requests in Mobile Safari


Since iOS 6 Mobile Safari is caching ajax requests, therefore many partial update operations in XPages don't work as planned.
There is a simple fix: you need to add a "cache-control=no-cache" header to every ajax (XHR) request. Simply put this code in a xp:scriptBlock in the XPage holding your mobile application:

if (!(dojo._xhrPost)) {
	dojo._xhrPost = dojo.xhrPost;
}

dojo.xhrPost = function(args) {
	args['preventCache'] = true;
	args['headers'] = { "cache-control": "no-cache" }
	return dojo._xhrPost(args);
}


Thanks Sven Hasselbach!

Developing native, offline capable Apps


Use Domino To Go.

Add Comment

Name:
Comments:
How to take your XPages App to the iPhone, iPad, Android: use Domino To Go!
Do you look for an XPages Workflow solution? Take YouAtNotes Workflow.