Windows Phone 7 - Disabling the default pinch/zoom & scroll-snapback behavior

edited May 2012 in Packaging Apps
I've been working through a few pain points when packaging Enyo apps for Windows Phone 7 using PhoneGap, and wanted to share this solution for one of the bigger issues on the platform.

When you package an Enyo (or any HTML app) on WP7, the native WebBrowser control is used as the wrapper for your content. Like other platforms, you have the option of setting your viewport to control whether or not the user can pinch/zoom.

Unlike other platforms however, the WP7 implementation still allows you to pinch/zoom - it just resets the content/viewport when you remove your finger from the screen. In addition, you are also able to scroll up/down the page, even though your app content doesn't extend past the viewport (like when using fit:true and/or enyo-fit). Like the pinch/zoom behavior, the scroller snaps back to its original position once you remove your finger from the screen. These quirks prevent you from being able to include certain events in your app (drag, mouseover/out, etc) and give you an undesired user experience - one that's immediately distinguishable from native apps.

I found an article where someone found a solution for this: . This post includes a handful of other interesting tips, so it's worth looking at. That being said, they include a lot of other information/code that's not directly related to the issue I'm trying to fix. Even while using the code provided, I still had to make some changes to make it work, so I wanted to post a quick walk-through that you can easily reference here.

Note: These instructions are assuming that your application's namespace is "App". Change this to match your own namespace.




1) Add a folder named 'Util' to your PhoneGap's main project folder

Your folder structure should now look something like this:
- App
    - Bin
    - GapLib
    - obj
    - Plugins
    - Properties
    - Service References
    - Util
    - www (your app contents)

2) Add the following 2 files to the new 'Util' folder, and paste in their contents:

LinqToVisualTree.cs - View code on gist
WebBrowserHelper.cs - View code on gist

*Note*: After adding these files, be sure to select the "Include In Project" option for this folder/files in Visual Studio.

3) Now open your MainPage.xaml.cs file and include this line in your list of dependencies, in the top section:

using App.Util

4) In the same file, go down to your namespace (directly under the line you just entered). You will need to change 3 things:
- Add WebBrowserHelper declaration
- Edit MainPage constructor
- Add Browser_ScriptNotify function

The contents of this file should now be similar to this: View code on gist

5) Lastly, open your app's index.html file and add this script in the <head>:

	// ensure that this page does not scroll

That should have your app looking and feeling a million times better.


  • Thanks for the clear, thorough explanation!
  • It's worth mentioned that in the latest main Cordova release - 1.7.0 - they've added a fix for the pinch/zoom issue. However, the overscroll issue remains. But you can still follow the steps above to apply the "fix".
  • I think it has to be:
    using Way.Util
    (as in WebBrowserHelper.cs defined) not the Apps namespace.
  • I did this but then nothing in my app scrolled. Is that the intent?
  • Thats the problem, you can only chose between scrolling nothing or scrolling everything. WP7 Webview is a pain, at least with current Cordova versions.
  • edited March 2013
    There's an easier solution. Just add

    $('body').on('mousemove', function(e) {
    to your html- or js-file. jQuery is needed.
  • please send me worked example
  • edited July 2013
    the solution
    $('body').on('mousemove', function(e) {
    is much more elegant.

    But I still want to be able to scroll content within page, while whole Page is bound to corners, Any Idea ?
    thanks in advance.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!