Windows Phone 7.5 Quirks

When developing javascript applications for Windows Phone 7.5, there are certain pain-points that you will need work through.

Issue 1 - Dealing with "device-width"
Typically when developing a javascript/Enyo application, you will want your content to make use of the full screen-size available. For most platforms, you can define this in your viewport:

However, this gets handled differently in WP7. The platform handles “device-width” as meaning 320px. So if your device has a screen resolution of 480 x 800, your application will simulate a screen width of 320px and scale your application to fit the screen.

Reference: http://blogs.msdn.com/b/iemobile/archive/2010/11/22/the-ie-mobile-viewport-on-windows-phone-7.aspx

Solution
The only solution at this time appears to be specifying pixel dimensions in your viewport.

                                                                                                                                                               

Issue 2 - Pinch/Zoom & Overscroll Behavior
Even when specifying "user-scalable=no" in your meta-viewport tag, the WP7 web browser control unfortunately allows you to pinch/zoom - resetting 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.

Solution
I address this issue & solution in greater detail in another thread.


                                                                                                                                                               

Issue 3 - Tap Highlights
When tapping input/button elements with event handlers in your application (links, input fields, buttons, etc.), the browser control will add its own highlight style. On webkit browsers, you can disable this behavior by specifying "-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" in your CSS. Windows Phone 7 does not have a similar CSS property, preventing you from having a consistent experience across all platforms.

image

There doesn't appear appear to be a real solution to this issue at the moment, but there are a couple of not-so-elegant workarounds you can use for buttons.

Solution 1
The default enyo/onyx.Button controls will exhibit this unwanted behavior. This happens because the highlight is automatically applied to <button> elements. In Enyo, specify that you want your button to use a <div> tag instead.
{kind: "onyx.Button", tag: "div", content: "I'm a button"}

The highlight should be gone. Using onmousedown/up events on your buttons gives you some ability to apply custom styles to your button states as well.

Solution 2
If you know the position & dimensions of a button, you can add a click event listener to your document, and capture the location of the event. You could then calculate whether the click occurred within the bounds of the button, and apply the desired styles to it. While it's technically possible, I wouldn't really suggest changing your application to use this method.

Comments

  • Thanks for these tips, @germboy! I've been having a hell of a time converting my simple app to Windows Phone, and this has been helping a lot.

    However, I'm having issues with the gray tap highlight. I'm able to remove it by converting my element into a div instead of a button or link, but then when I tap it the copy/paste controls pop up because the text is getting selected. Have you run into this problem?
Sign In or Register to comment.