So i’m not a css-wizard but i do know enough to make proper customization and styling for my apps.
Is a couple of days that i’m trying to lay down some “guide lines” to understand how to create a fully responsive app.
I’m taking as example the dashboard demo and I’ve delved deeply into the css in order to dig up the basic rules.
Now i know and understand the use of Responsive.makeResponsive() in the code and the use of “range” in the css.
What i’m not able to do is to fix the “DPI” of the app. So on my Samsung S4, which has a full 980p display my app is still “small” but the dashboard demo isn’t.
How do I achieve this? If i inspect with chrome the dashboard demo i see that the ui size, instead of being 980p is 360p and the app is kinda “zoomed” , “big” thus scaling well and effectively responsive.
aight i’m getting desperate. I’ve downloaded and run the dashboard demo project.
It is NOT responsive! It doesn’t behave like the version on line (is still “small” on mobile devices)…
Anyway I’ve found the little sneaky missing piece:
head.appendElement("meta").attr("name", "viewport").attr("content", "width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no")
to be put in a BoostrapListener.
See this article https://vaadin.com/forum#!/thread/3993515
This piece is definetly missing in the dashboard demo project you can download (there’s the class but not used in the UI setup), but is present in the version online!