I chose jQuery as my JavaScript library, and I opted not to use iUI. The iUI choice was driven primarily by the specifics of the application, and the kind of user interaction that made sense for it.
Here is the most basic JS/CSS to get the iPhone orientation detection going:
<head>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<%=javascript_include_tag 'jquery' %>
<script language="JavaScript">
window.onload=function(){
setTimeout(ip.updateLayout, 0);
setInterval(ip.updateLayout, 100);
setTimeout(ip.hideURLbar,100);
};
ip={
pageWidth:null,
updateLayout:function(){
var width=window.innerWidth;
if (width != ip.pageWidth) {
ip.pageWidth = width;
var orientation = width == 320 ? "profile" : "landscape";
// fire transition events
orientation == 'profile' ? ip.transitionToProfile() : ip.transitionToLandscape();
$(document.body).attr('class', orientation);
setTimeout(function(){
window.scrollTo(0, 1);
}, 100);
}
},
transitionToProfile: function(){
},
transitionToLandscape: function(){
},
hideURLbar:function(){
window.scrollTo(0, 1);
}
};
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: Helvetica;
color: #FFFFFF;
-webkit-user-select: none;
cursor: default;
-webkit-text-size-adjust: none;
}
body.profile {
height:416px;
background-color:red;
}
body.landscape {
height:270px;
background-color:green;
}
</style>
</head>