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:
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.