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>
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.
Comments (11)
Silentrob said
at 3:52 pm on Feb 4, 2009
Nicely done - your right it is a dead giveaway.
raff said
at 1:11 am on Feb 12, 2009
I followed these instructions and they work, but when editing a form field and the keyboard (or the list picker) pops up the page scrolls up, to keep the input field in view. When the keyboard/picker is closed the page doesn't scrolls down until I touch the screen.
Is there a solution for this ? (maybe check the "firstresponder" stuff and reset the page position to 0,0 ?)
B. Waite said
at 8:44 pm on Feb 13, 2009
@raff: The only solution I found was to invoke window.scrollTo(0, 0) on the element's blur event.
Pete Strickler said
at 10:48 pm on Feb 13, 2009
Try this:
Inside the <head> tag, add:
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<script type="application/x-javascript">
document.addEventListener("touchmove", function(e){e.preventDefault();}, false);
</script>
That should fix you right up...
Jim Rohrer said
at 9:38 am on Apr 21, 2009
On a related note: I wanted to scroll back to the origin when the user had finished editing. Scrolling after every onBlur caused an ugly 'bounce.' Here is how I ended up resolving this... (Improvements are encouraged).
http://jjrohrer.webfactional.com/blog/etr/mobile-safari-scoll-home-after-inpu
PS - the code was too long to post in this comment.
Adam Kleifield said
at 1:15 pm on May 5, 2009
I've noticed that I'm still able to move the page around sometimes with a two-fingered drag. Has anyone experienced that/found a way to disable it?
Tariq Sherriff said
at 2:58 pm on Sep 2, 2009
I have pages in my application that require that the user scrolls down. However, I don't want the user to be able to scroll too far up or too far down where it shows the gray part on the bottom or on the top
Michael Nachbaur said
at 7:10 pm on Oct 2, 2009
Here's the method I use to control scrolling in a PhoneGap app.
http://gist.github.com/200366
In my apps there are times I want to disable scrolling altogether, and other times when I want to enable scrolling for a single section of a UI. This snippet of code sets a property on the "document" object that, when you set it to true or false, automatically sets the appropriate properties for you in a way that doesn't leak memory.
So just say:
document.preventScroll = true;
or
document.preventScroll = false;
Gregory Whiteside said
at 1:05 pm on Nov 3, 2009
Michael : using this method, you set the scrolling property on the whole document, correct? is there a way to set it only on a certain part of the UI - so for example to set a fixed header/footer (like native iphone apps) and allow the user only to scroll the content in the middle?
Michael Nachbaur said
at 1:37 pm on Nov 3, 2009
Gregory: No, you can't. The iPhone scrolls all-or-nothing. There is an iscroll.js kicking around the internet somewhere that uses CSS3 hackery to fake scrolling, but it's really sluggish. It's okay in a pinch, but this is the reason why I built the native UI controls (native toolbar / tab bar): that way I can scroll all of PhoneGap native, while still keeping my app navigation in place
Wuff said
at 6:37 pm on Nov 3, 2009
@Michael Nachbaur - I'm curious to know how to go about doing this. I'm using the "iscroll.js" thing currently and having a custom nav-bar at the bottom of my app... which is fine while I'm developing, as I can do the whole thing in Safari and build as a web-app for now. However, the performance issues make me want to use a native approach to the nav-bar and toolbar elements framing the content, when I get to the point where the rest seems ready... I'm not sure how to go about doing this.
I'm assuming there needs to be some command on Objective-C side of things that sends a message to the console-log that the Javascript side 'sees' (that's my understanding on how communication is done between the two layers?), such as "nav-bar icon #3 tapped"... probably needs to be something on the Javascript side that can signal back a "ready" signal, and also (for the toolbar side), some method to set the toolbar title and buttons (which should themselves be able to signal back to the JS side when they're tapped).
If you know of a tutorial about how to do this, or can provide an example, I'd appreciate it!
Thanks. :)
You don't have permission to comment on this page.