Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
How to set the Width for Mobile Browser
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?
I found to add
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
into <head></head>
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...
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\">'")
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.