RE: Vaadin UI for mobile screen

Vaadin 6 / 7 / 8
1

Hi,

the simplest way to achieve that would be to check the size from

Page.getCurrent().getBrowserWindowWidth() or

Page.getCurrent().getWebBrowser().getScreenWidth()

and use that information to determine if the user is currently on a mobile browser. Then just increase the text size with whatever way is the most convenient for you, for example by adding a special class name for your Components.

-Olli

2

Is there any way that UI can change to mobile size?

caption on button or text seem like the same size as I can see in the desktop browser which makes it hard to read on mobile screen.

3

Bakery works great on mobile as well as desktop. It was implemented by having CSS for different screen sizes that tells how it should behave in different screen sizes. You can test the software on different devices in the
official demo
 and download the project to see how what is done at
vaadin.com/start
. The relevant files are in the theme. For example _dashboardview.scss removes padding when on a mobile screen (0-599px wide screens):

.dashboard-view[width-range~="-599px"]
 {
  /* minimize spacing/padding on small screens */
  vaadin-board {
    padding: 0;
    ...
  }
}