This project is read-only.

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

Apr 22, 2014 at 9:55 AM
Hi,

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?

Christian
Apr 23, 2014 at 9:13 AM
Hi,

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 9:18 AM
Hi,

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.

Christian
Apr 25, 2014 at 11: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 1:49 PM
Hi,

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:

http://tinypic.com/r/25qr5z7/8

This is the default template with the Bootstrap pages:

http://tinypic.com/r/oi4x7p/8

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

http://tinypic.com/r/25jl8r4/8

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

Christian