Viewport problem

Hi there, I’m trying to adapt a jmix application to a mobile device. On cuba pltaform there was a property named cuba.web.useDeviceWidthForViewport = true usefull to adapt the zoom of the app to the device. How can i implement it on jmix?

1 Like

Hi,

In Jmix you need to implement a custom BootstrapListener and modify the head element of you app’s page, e.g.:

import com.vaadin.server.BootstrapFragmentResponse;
import com.vaadin.server.BootstrapListener;
import com.vaadin.server.BootstrapPageResponse;
import org.jsoup.nodes.Element;
import org.springframework.stereotype.Component;

@Component("demo_CustomBootstrapListener")
public class CustomBootstrapListener implements BootstrapListener {

    @Override
    public void modifyBootstrapFragment(BootstrapFragmentResponse response) {

    }

    @Override
    public void modifyBootstrapPage(BootstrapPageResponse response) {
        Element head = response.getDocument().getElementsByTag("head").get(0);

        // initial-scale can be changes for better UX
        includeMetaViewport("width=device-width, initial-scale=" + 0.8, response, head);
    }

    protected void includeMetaViewport(String content, BootstrapPageResponse response, Element head) {
        Element meta = response.getDocument().createElement("meta");
        meta.attr("name", "viewport");
        meta.attr("content", content);
        head.appendChild(meta);
    }
}

Regards,
Gleb

Hi Gleb,
Thnak you very much…i have to understand how to implempent a listener :smiley:
Is there a reference in the manual?

Just create a class CustomBootstrapListener and put the code above in it. Framework will find all beans that implement BootstrapListener and call them.