How to tame WebBrowser control on Windows Phone 8

When building cross-platform mobile applications it sometimes, not surprisingly, requires a web view as a means of displaying content to the user. On Windows Phone 8 this is done by embedding a WebBrowser control in each page. Now, there are some issues with the WebBrowser control that needs some working around.

Viewport device width

First of all: even though we’re using a WebBrowser for showing content to the user, there should still be a native feel to the app. Thus, all the content should fit horizontally which is accomplished using responsive design e.g. using Twitter Bootstrap. However, IE10 which is used for rendering the web content in the WebControl has a bug which makes the view port render itself with the wrong size making the view zoomed out.
To work-around this issue an “if IE”-fix has to be implemented in the head of the web pages’ html-code like so (see here here for a more in-depth explanation of the issue):

It is also necessary specify the width in the viewport meta tag:

Update
There seems as there actually is fix for the viewport issue in update 3 for Windows Phone 8.
However, the Javascript workaround doesn’t have any side effects so it is safe to include it which fixes the issue for devices not yet updated.

Navigation

There is yet another challenge when it comes to embedding WebBrowser controls in pages on Windows Phone 8: how do you navigate from one page embedding a WebBrowser to another especially when the pages are semantically related? Just use a pivot control, right? Not possible in this case unfortunately. The WebBrowser control swallows the swiping gesture event and doesn’t pass it along up the UI control tree. The only way to get around this is to set IsHitTestVisible to false but this disables scrolling in vertical direction too and tapping as well so this is not an option. The only way to handle this, to my knowledge, is to use this work-around to switch pivot items in code using the Touch API (the code in the SO answer has been modified below by Johan Lindfors and myself):

This is somewhat “hacky” but does provide a pretty nice user experience in my opinion even though it doesn’t give the user the same fluent continuous swiping as for the “native” swipe in the Pivot control.

Thanks to Johan Lindfors and Peter Bryntesson who helped solve the above problems!

References
Windows Phone 8 and device width
Responsive design in IE10 on Windows Phone 8
Making swipe work for a pivot control with embedded WebBrowser on Windows Phone

This Post Has 3 Comments

  1. Hi there.
    Nice article.
    I just don’t understand need for JavaScript workaround for Viewport device width.

    I have put on my WebBrowser control:

    without any JavaScript workarounds and it seams to work.
    I have applied your JavaScript fix but I don’t see any difference.

    Note: I am building Windows Phone 8 application

  2. Here is missing code from above comment :
    meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1 “

    1. Thanks Radenko!
      There seems as there actually is fix for the viewport issue in update 3 for Windows Phone 8.
      However, the Javascript workaround doesn’t have any side effects so it is safe to include it which fixes the issue for devices not yet updated (apparently my device is one of them :))

Leave a Reply

Close Menu