What is the correct way to detect a device with a vaadin flow?

44 Views Asked by At

I would like to be able to detect whether my page is being viewed on a mobile device.

grid.addItemClickListener( event -> {        
        if( isMobileView( ) )
        {
            splitLayout.setSplitterPosition( 0 ); 
            backArrow.setVisible( true );
        }
    } );

I am using Vaadin Flow 24 as far as it goes and have tried the following. In my opinion it should be easy to use vaadinUtil to detect if the page is being viewed on a mobile device. Thanks in advance to those who can answer and share their knowledge. I would also like to here from Vaadin official guys.

    private boolean isMobileView()
{
    UI ui = UI.getCurrent( );
    Page page = ui.getPage( );
    if( page != null )
    {
        page.retrieveExtendedClientDetails( details -> {
            int screenWidth = details.getScreenWidth( );
            int screenHeight = details.getScreenHeight( );
            isScreenWidthLessThan600 = screenWidth < 600;
        } );
    }
    return isScreenWidthLessThan600;
}

public  boolean isMobileDevice() {
    WebBrowser webBrowser = VaadinSession.getCurrent().getBrowser();
    return webBrowser.isAndroid() || webBrowser.isIPhone() || webBrowser.isWindowsPhone();
}

public  boolean isMobi() {
    String userAgent = VaadinService.getCurrentRequest( ).getHeader( "User-Agent" );
    boolean isMobi = userAgent != null && userAgent.toLowerCase( ).contains( "mobi" );
    
    return isMobi;
}
0

There are 0 best solutions below