Vaadin reconnaît différentes tailles de navigateur à partir d'applications différentes, mais l'appareil est le même

Question

J'ai pris le Vaadin Dashboard Demo et construire une autre application à partir de celui-ci. Les arborescences des composants des deux applications sont identiques, ainsi que les thèmes et leurs feuilles de style.

Si je redimensionne le navigateur de bureau j'obtenir le comportement réactif que je pense, mais quand je l'accès depuis un navigateur mobile (Chrome sur le Nexus 5) Je reçois des comportements différents:

L'ajout de ces lignes au fin du procédé init() des deux UI s

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

je reçois pour mon application:

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 

et pour le tableau de bord 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 

Depuis mon application fonctionne sur le navigateur de bureau redimensionnée Je suis sûr que cela fonctionnera si seulement il peut obtenir la même taille du navigateur du tableau de bord.

Cela n'a pas de sens pour moi, quelqu'un d'autre a ce problème? Si vous avez besoin d'informations supplémentaires, veuillez commenter et je modifierai la question.

Answer 1

Les navigateurs mobiles ont besoin d'un message d'avertissement cérémonial dans le méta en-tête viewport.

Voir https://github.com/vaadin/dashboard-demo/blob/b9749203291bc5e485ed59d40433e809547a036d/src/main/java/com/vaadin/demo/dashboard/DashboardSessionInitListener.java#L24-L27 pour savoir comment cela est fait dans le projet, vous avez mentionné comme base.

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