Introduction
If you want your PhoneGap application on your iPhone to look just like a genuine, native iPhone app, you'll want to prevent users scrolling up and down your HTML by dragging their fingers across the iPhone screen. It's a complete giveaway that it's a WebKit Control inside an container.
Preventing scrolling
Imagine that your web page has a format as follows:
<body>
<div id="container>
content goes here
</div>
</body>
You can style the page using CSS to ensure that the whole iPhone screen is used:
#container {
width:100%;
height:100%;
}
In addition, you can prevent scrolling of the "container" div by modifying your HTML code:
<script type="text/javascript">
touchMove = function(event) {
// Prevent scrolling on this element
event.preventDefault();
}
</script>
<body>
<div id="container" ontouchmove="touchMove(event);">
content goes here
</div>
</body>
Another Option with Scrolling
While the above solution solves the problem of scrolling out of range - it also limits your canvas to the size of the view-port, a sacrifice many developers may not be willing to make. Here's a work-around that will enable you to create interfaces of any height while still preventing users from ever scrolling above or below the vertical bounds of the page. It requires the jQuery libary.
Put this toward the top of your code:
<script type="text/javascript">
// Prevent ugly scrolling on this element
(function($){
$.fn.preventUglyScroll = function(){
var node = this[0];
node.ontouchstart = function(event) {
touchStart = event;
frameStart = $(node).offset().top;
}
node.ontouchmove = function(event){
// block all two finger gestures
if(event.touches.length > 1) {
event.preventDefault();
return false;
}
event.preventDefault();
var yDiff = event.pageY - touchStart.pageY;
var newTop = yDiff + frameStart;
var hMin = 460 - $(node).height();
if(newTop <= 0 && newTop > hMin) {
$(node).css('margin-top', newTop);
}
}
}
})(jQuery);
</script>
Then in your onload function:
// IPHONE INIT
document.addEventListener('deviceready', function() {
$('#featureFrame').preventUglyScroll();
where "featureFrame" is the id of your outer-most HTML element.
Filling the whole screen
To ensure that the entire screen is filled, your HTML should contain the following in the "head" section:
<meta name = "viewport" content = "user-scalable=no,width=device-width" />
This instructs Safari to prevent the user from zooming into the page with the "pinch" gesture and fixes the width of the view port to the width of the screen, which ever orientation the iPhone is in.
