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

Question

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

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

将这些行添加到两个 UIs

的 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 元 header.

中需要一些仪式样板

请参阅 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");

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

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

java

screen-resolution

vaadin

vaadin7