How to set the Width for Mobile Browser

This is a simple test case:

class MyUI extends UI {

protected void init(VaadinRequest vaadinRequest) {
    VerticalLayout layout = new VerticalLayout()
    layout.addComponent(new Button("Test"))

In Chrome with F12 and choose the iphone, the width will always be 980 and make the button very small.

How can I set the width to 640 or 320 to make the UI fills iphone better?

I found to add


will make the page fits my need. But I still can not find the way to add the <meta…> with Vaadin code.

Maybe someone can help me to do this.



use the code:

    getPage().getJavaScript().execute("document.head.innerHTML += '<meta name=\"viewport\" content=\"initial-scale = 1.0,maximum-scale = 1.0\">'")

Not sure if it does everything you want but there is a ViewPort annotation (Javadoc:
which can be added to the UI class. It is also used in the new Maven Crud Example Application Archetype like this:

@Viewport("user-scalable=no,initial-scale=1.0" Not quite sure when it was added though but it definitely can be found in the latest version.