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

Question

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

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

将这些行添加到两个UI的init()方法的末尾

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

我的应用程序得到：

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

对于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: 360x512

由于我的应用程序可以在调整了大小的桌面浏览器上运行，我确信只要它能够获得与仪表板相同的浏览器大小，它就会工作

这对我来说没有意义，其他人有这个问题吗？如果你需要更多信息，请发表评论，我会编辑这个问题

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");