Viewport problem

gorelov · May 30, 2023, 6:54am

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