I’m in the process of converting [my touchkit application]
(https://github.com/steinarb/ukelonn) from Vaadin 7/TouchKit 4 to Vaadin 8/TouchKit 5.
Right now I’m at the stage where the Vaadin8/TouchKit5 application is starting to look and behave like the Vaadin7/TouchKit4 version when running on a regular web browser on a PC.
But when I try running the application on mobile devices, the Vaadin8/TouchKit5 version looks squashed up, with a font much too small.
I tried adding “?debug” to the URL of a chrome simulating iPhone 5, and the debug window was so small it couldn’t be read.
So that didn’t work.
There is nothing in the logs saying that I’m missing parts from themes or widgetsets (e.g. when the TouchKit widgetset was missing a font from the old base theme, it complained in the logs).
I checked to see if the contents of the <style> element of the <head> of the HTML was different for the HTML delivered to the chrome iPhone simulator and a regular chrome (where the application is formatted sensibly and similar to the way the application looks on a regular chrome with Vaadin7/TouchKit4).
And as far as I (and diff) can tell, the contents of the two <style> elements, are identical.
So it has to be something actually in the CSS that causes the squashed up formatting…?
I was actually originally extending the TouchKitServlet, but early on in [the Vaadin 7 → Vaadin 8 conversion]
(https://github.com/steinarb/ukelonn/tree/work/using-vaadin-with-vaadin8), it didn’t seem to make any difference whether I was extending the TouchKitServlet or was extending the VaadinServlet.
But mobile formatting only works when extending the TouchKitServlet.