Why is the font of my Cordova App so extremely small on Windows Phone 8.1 Device?

Question

I created a Web app and now converted this to a Cordova App. When I deploy it to my Windows Phone 8.1 device, the text is extremely small, much smaller than in the browser on the same device. I now created a mini app which just shows one line of text, same here, text is small in the Cordova App, text has normal size if I run it in the Browser on the same phone.

I tried creating it as Windows Phone 8 App, then the text has the right size.

I played around with the viewport meta tag, didn't change anything.

Answer 1

You may be running into a problem where certain web frameworks go into "iPad Mode" with devices that have a 768px effective width. This was a common problem with Twitter bootstrap.

There are some fixes suggested such as this one though you'd need to detect IE 11 instead of 10: https://timkadlec.com/2013/01/windows-phone-8-and-device-width/

Answer 2

There was a bug in Windows Phone implementation, which didn't calculate the viewport's size in the correct way. This was fixed in Windows Phone Update 3 (8.0.10512), but unfortunately not for Nokia Lumia 920. Therefore, the recommended workaround is to add the following script:

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement("style");
  msViewportStyle.appendChild(
    document.createTextNode("@-ms-viewport{width:auto!important}")
  );
  document.getElementsByTagName("head")[0].
    appendChild(msViewportStyle);
}

If you are building a Cordova app, it should be sufficient to add the style to the style sheet of Windows Phone:

@-ms-viewport { 
  width: auto !important;
}