How to set the Width for Mobile Browser

Vaadin 6 / 7 / 8 Framework UI
1

This is a simple test case:

class MyUI extends UI {

@Override
protected void init(VaadinRequest vaadinRequest) {
    VerticalLayout layout = new VerticalLayout()
    layout.setMargin(true)
    setWidth("640px")
   
    layout.setWidth("640px")
    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?

2

I found to add

into

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.

Waitting…

3

DONE

https://dev.vaadin.com/ticket/13710

use the code:

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

Not sure if it does everything you want but there is a ViewPort annotation (Javadoc:
https://vaadin.com/api/com/vaadin/annotations/Viewport.html
)
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.