651.288.7000 info@intertech.com

I recently started targeting the Windows Phone with a cross-platform mobile project using Cordova, Ionic, and AngularJS.  Keep in mind that Windows Phone is not officially supported by the Ionic framework.  That shouldn’t stop us from trying, right?

To the average web developer (turned hybrid mobile dev?!), porting your Cordova/Ionic app to Windows Phone will seem like cake compared to creating a website that supports IE6-IE9.  If you’ve proudly conquered any Internet Explorer compatibility issues in the past, be prepared for a heavy dose of nostalgia.

Although I’m sure there are more, so far I’ve come across three issues that must be addressed when targeting the Windows Phone with your Cordova/Ionic app.  This post focuses on the first anomaly one may notice when targeting the Windows Phone: a misbehaving viewport.  Future posts will discuss buggy <select> elements, broken web fonts (including popular icon sets), and perhaps even more frustrating Windows Phone issues.

1. Misbehaving Viewport

If you’ve got any elements fixed to the bottom of your app, this is probably the first problem you’ll notice when targeting the Windows Phone. Basically, the system tray seems to push everything down. Here’s an example:

Without Windows Phone configuration fix.

Draw your attention to the tabs on the bottom.  They don’t look that bad, but they are supposed to be labels underneath each icon. It appears that the footer is being cut off by an amount equal to the height of the system tray.  This is how we want it to look:

Including Windows Phone configuration fix.

I know what you might be thinking: I can just detect Windows Phone devices ($cordovaDevice.getPlatform() or ionic.Platform.isWindowsPhone() might due) and offset the footer’s bottom style by about 15 pixels…  And you’re right, you can give that a shot. I almost did exactly that.

The problem with that approach is the inevitable variation in the required offset.  Maybe 15 pixels works fine on my Nokia Lumia 520, but will it work on every Windows Phone Device?!  Who knows… And why chance it when there is a surefire way to fix this.

If you’re willing to go fullscreen with the Windows Phone version of your app (can’t see battery, clock, etc while using app), then I’d highly recommend opening the config.xml and setting Fullscreen to “Yes” in the common tab:

config-xml-screenshot

Now if you open that config.xml in a non-Visual Stuido text editor or by right clicking on it in VS and selecting “View Code” you’ll find something like this:

That setting gives us this fullscreen result:

Window Phone Apache Cordova Fullscreen

That will work, but it will also remove the system tray for every device, not just Windows Phone. That’s probably not what you want. Fortunately, you can wrap the fullscreen preference in a platform element to specifically target the Windows Phone:

This technique is documented in the Cordova config.xml documentation and by spanna in this StackOverflow question.

My guess is that this viewport issue will be addressed in a future version of the Ionic framework since they’re working so hard to add support for the Windows Phone.  It may even be resolved with Windows 10.

I hope this was helpful to a fellow Windows Phone targeter.  Stay tuned for the next issue I address: buggy, double opening <select> elements.  Happy coding!

Like What You've Read?

Subscribe to the Blog.

Every Friday we send that week's content from our Developers via email. Try it out!

Some ad blockers can block the form below.

You have Successfully Subscribed!

Pin It on Pinterest

Share This