Bad mobile formatting with TouchKit 5

[steinarb]

I'm in the process of porting a Vaadin7/TouchKit4 application to Vaadin8/TouchKit5.

I'm at the stage where the application looks similar to the Vaadin7/TouchKit4 version when displaying in a regular web browser on a PC.

However, on a mobile device, the formatting is all squashed up (the font is way too small, for one thing).

The Vaadin7/TouchKit4 version looks like this (this is what it's supposed to look like):

The Vaadin8/TouchKit5 version looks like this:

What might 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.

[steinarb]

TouchKit 5 has a base.css that says "This file contains essential stuff from base theme.", and that contains a lot of commented out stuff.

Is any of the comment out stuff related to formatting on mobile devices?

[mstahv]

Related to #15 ?

[steinarb]

I actually figured out a way to fix this last night: go back to where I started with my servlet extending the TouchKitServlet
https://github.com/steinarb/ukelonn/blob/56f292623b741b89f17abf4a10eabd1dd0d106c3/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/UkelonnServlet.java#L48
instead of the VaadinServlet
https://github.com/steinarb/ukelonn/blob/0d20b044650ba487c42b9864ea46cab493851af6/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/UkelonnServlet.java#L46

Early on in the Vaadin 8 conversion I couldn't see any difference between extending the VaadinServlet versus extending the TouchKitServlet, so I just extended the VaadinServlet with the theory of keeping things as simple as possible.

But extending the TouchKitServlet is necessary to get mobile formatting, and even makes mobile formatting work (more or less) for the valo theme.

So I guess this issue can be resolved as not a bug.

[mstahv]

And related #15 and #16 as well?

[steinarb]

Yes, I'm guessing it's probably related to #15 and #16.

But I don't have any evidence to back this guess.