Tips for Ionic on Windows Phone

Hi all,

I recently had to deploy an Ionic app on Windows Phone 8.1.

Though Windows Phone is not yet officially supported, after some trials and errors (and lots of Googling :wink: ) I was able to solve almost any problem on that platform and my app is now running almost perfectly on WP too.

Just wanted to share the solutions I found to some of the (possibly) most common issues on Windows Phone. I don’t expect these to work for all of you but hope they could be useful to someone else that needs or wants to support such platform too.

Font Awesome icons not visible
Open font-awesome.css (or font-awesome.min.css depending on which one you are using) and replace:
url(’…/fonts/fontawesome-webfont.ttf?v=4.3.0’)
with:
url(’…/fonts/fontawesome-webfont.ttf’)

(Very) Small font size with respect to Android and iOS
Inside ionic.css comment:
@-ms-viewport {
width: device-width; }

Scroll not working
This is probably the most annoying issue on Windows Phone as you cannot scroll up/down in any way (even when using two fingers the result is pretty ugly and jerky).
In order to fix this disable javascript scrolling by adding the following in your app.js:

.config(function($ionicConfigProvider) {
var configProvider = $ionicConfigProvider;
configProvider.scrolling.jsScrolling(false);
})

and add the following to your app’s css:

body.platform-windowsphone .scroll-content,
body.platform-windowsphone8 .scroll-content {
overflow: auto;
}

though the css part is not necessary, I found it makes the scroll even smoother.

With the combination of such js and css I got an almost perfect scroll on my app, as smooth and fluid as that on Android and iOS

ng-click not working
Be sure to wrap elements with ng-click with a div tag.
Even if on Android and iOS ng-click is triggered regardless of wrapping element (I had some buttons wrapped within a label element) on Windows Phone these must have a div container otherwise they won’t be fired

Well that’s all … hope it can be helpful to someone

4 Likes

Really Great tips @marcot1

Thanks for sharing mate.
I was having an issue with the tab bar not showing on the release version of WP8.
The scrolling trick fixed that, plus it made the scrolling much better.

Hi @philkav82,

glad to hear that :smile:

Best regards

1 Like