Get started
Loading...
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.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8Framework UI

How to set the Width for Mobile Browser

Liang ZHANG
6 years ago May 31, 2015 7:19am

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?

Liang ZHANG
6 years ago Jun 02, 2015 2:55am

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...

Liang ZHANG
6 years ago Jun 02, 2015 3:18am

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\">'")

Marius Reinwald
6 years ago Jun 02, 2015 6:18am

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.