how to get browser size before BrowserWindowResizeEvent comes in?


i have a requirement that need generate different Component for different browser width. i add BrowserWindowResizeListener, but i found it was not triggered when page initialize.

so, how can i get the browser size when page initialize?


You can do this:

public class BrowserDetailsView extends VerticalLayout {

    private Div message = new Div();

    public BrowserDetailsView() {
        message.addAttachListener(attachEvent -> {
            // when the browser changes
            attachEvent.getUI().getPage().addBrowserWindowResizeListener(resizeEvent -> {
            // first init
            attachEvent.getUI().getPage().retrieveExtendedClientDetails(re -> {
                message.setText("Width init"+ re.getWindowInnerWidth());


Don’t forget that you will send a lot of requests to the server (if the user is resizing the browser).

You can also use this add-on: (disclaimer I’m the author of the add-on)
It sends only a request when the condition is updated.
For example here: customMediaQuery800.setQuery("(min-width: 800px)"); when the browser size is changing from 801 to 799.

It depends of your usecase :slight_smile: . If you have any questions, feel free to ask.