TouchKit app looks squashed on mobile devices with Vaadin8/TouchKit5

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.

The Vaadin7/TouchKit4 version looks like this (this is what it’s supposed to look like):
![Ukelonn application on Vaadin 7 with TouchKit 4]
(https://farm1.staticflickr.com/975/27392713947_358227202a.jpg)

The Vaadin8/TouchKit5 version looks like this:
![Ukelonn application on Vaadin 8 with TouchKit 5]
(https://farm1.staticflickr.com/954/42263617521_fa690113bb.jpg)

Does anyone know what may cause this layout difference? And why do I see it only on mobile devices?

The Vaadin7/TouchKit4 version of the code:
https://github.com/steinarb/ukelonn/blob/master/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/UkelonnUI.java#L30
https://github.com/steinarb/ukelonn/blob/master/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/UserView.java#L43

The Vaadin8/TouchKit5 version of the code:
https://github.com/steinarb/ukelonn/blob/work/using-vaadin-with-vaadin8/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/UkelonnUI.java#L29
https://github.com/steinarb/ukelonn/blob/work/using-vaadin-with-vaadin8/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/UserView.java#L46

I’ve used chrome development tools simulating an iPhone 5 to make the screen captures, but it is similar to what I see on real mobile devices.

My first guess is that for some reason the correct theme is missing.

Are there some standard techniques I could use to track down what’s missing?

Thanks!

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’ve created a github issue in the [parttio/TouchKit repository]
(https://github.com/parttio/touchkit) for this problem: [Bad mobile formatting with TouchKit 5]
(https://github.com/parttio/touchkit/issues/17)

This was a user error, rather than a bug: when I [switched from extending the VaadinServlet to extending the TouchKitServlet]
(https://github.com/steinarb/ukelonn/commit/56f292623b741b89f17abf4a10eabd1dd0d106c3), mobile formatting started working again (even (sort of) working when I was using the valo theme).

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.