Vaadin识别不同应用程序的不同浏览器大小，但设备是相同的

Question

我拿了Vaadin Dashboard Demo并从中构建了另一个应用。两个应用程序的组件树是相同的，以及主题和样式表。

如果我调整桌面浏览器的大小，我会得到我期望的响应行为，但是当我从移动浏览器（Nexus 5上的Chrome）访问时，我会遇到不同的行为：

将这些行添加到两个init()的{​​{1}}方法的末尾

UI

我得到了我的应用：

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());
    }
}

和Vaadin仪表板：

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

由于我的应用程序适用于已调整大小的桌面浏览器，我确信只有它可以获得与控制板相同的浏览器大小才会起作用。

对我来说没有意义，其他人遇到了这个问题？如果您需要其他信息，请发表评论，我将编辑问题。

Answer 1

移动浏览器需要viewport元标题中的一些仪式样板。

请参阅https://github.com/vaadin/dashboard-demo/blob/b9749203291bc5e485ed59d40433e809547a036d/src/main/java/com/vaadin/demo/dashboard/DashboardSessionInitListener.java#L24-L27了解如何在项目中完成，您提到了它作为基础。

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