Search code examples
javavaadinscreen-resolutionvaadin7

Vaadin recognizes different browser sizes from different applications but the device is the same

I took the Vaadin Dashboard Demo and build another app from it. The component trees of the two apps are the same, as well as the themes and their stylesheets.

If I resize the desktop browser I get the responsive behaviour that I expect, but when I access from a mobile browser (Chrome on the Nexus 5) I get different behaviours: Custom app vs Dashboard

Adding these lines to the end of the init() method of the two UIs

public class MyAppUI extends UI {
    ...
    @Override
    protected void init(VaadinRequest request) {
        ...
        final Page page = Page.getCurrent();
        System.out.println(page.getWebBrowser().getBrowserApplication());
        System.out.println("Resolution: " + page.getBrowserWindowWidth() + "x" + page.getBrowserWindowHeight());
    }
}

public class DashboardUI extends UI {
    ...
    @Override
    protected void init(VaadinRequest request) {
        ...
        final Page page = Page.getCurrent();
        System.out.println(page.getWebBrowser().getBrowserApplication());
        System.out.println("Resolution: " + page.getBrowserWindowWidth() + "x" + page.getBrowserWindowHeight());
    }
}

I get for my app:

Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MMB29S) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.83 Mobile Safari/537.36
Resolution: 980x1394

and for the Vaadin Dashboard:

Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MMB29S) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.83 Mobile Safari/537.36
Resolution: 360x512

Since my app works on resized desktop browser I'm sure it will work if only it can get the same browser size of the Dashboard.

It doesn't make sense to me, someone else got this problem? If you need additional information please comment and I'll edit the question.

Solution

  • Mobile browsers need some ceremonial boilerplate in the viewport meta header.

    See https://github.com/vaadin/dashboard-demo/blob/b9749203291bc5e485ed59d40433e809547a036d/src/main/java/com/vaadin/demo/dashboard/DashboardSessionInitListener.java#L24-L27 for how it is done in the project, you mentioned as your base.

    head.appendElement("meta")
        .attr("name", "viewport")
        .attr("content",
                "width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no");