Web-sites built with Bootstrap on high DPI screens becomes too small

Apr 22, 2014 at 8:55 AM

When trying to wrap a web site that uses Bootstrap (http://getbootstrap.com/) as its style, the webview will render the screen with small fonts on high-DPI screens like the MacBook Pro.

To reproduce this: Create a new Windows Store App that points to a site using bootstrap (you can use the Bootstrap pages at http://getbootstrap.com but then you need to remove a line from the redirects section in the config.json file.)

Anyone else experiencing this?

Apr 23, 2014 at 8:13 AM

Have you got the viewport set in config.json?

This is not intended to be used with responsive site and may be what is causing your issue.
Apr 23, 2014 at 8:18 AM

Yes and no :-) I've tried turning off the setviewport setting, it does not help. It isn't the responsiveness I'm after, and I understand that WAT does not target this - but the site that I'm asked to convert uses Bootstrap, so I have no other option than using it as is.

The site works perfectly on a regular screen or on my surface, the problem is only showing on my retina mac - but considering all the new PCs out there with high DPI screens this might be a good thing to find a solution for.

Apr 25, 2014 at 10:59 AM
Standard bootstrap sites should work fine with WAT, in fact the WAT docs site (http://wat-docs.azurewebsites.net/) is built with Bootstrap and it is the default site when you create a new WAT project.

Try creating a new project and running it without any changes - are you seeing the same issue with this site?
Apr 25, 2014 at 12:49 PM

All sites using Bootstrap works, but their fonts does not size correctly. Look at the samples below:

This is the default template with the WAT page:


This is the default template with the Bootstrap pages:


The I clicked on the link for the Bootstrap GitHub pages and things started to look ok:


All screenshots taken on a Macbook Pro with Retina screen at 2880x1800.