检测具有vaadin流的设备的正确方法是什么？

Question

我希望能够检测我的页面是否正在移动设备上查看。

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

我正在使用 Vaadin Flow 24，并尝试了以下操作。在我看来，使用 vaadinUtil 来检测页面是否正在移动设备上查看应该很容易。 预先感谢那些能够回答并分享他们的知识的人。我也想听 Vaadin 官方人员的意见。

    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;
}

Answer 1

没有万无一失的方法。主要使用三种方法：

a) 用户代理

b) 屏幕分辨率

c) 触摸可用性

通常，您最终会结合上述一项或多项。

用户代理字符串包含最多信息，但这需要枚举“已知移动”子字符串。这种方法有严重的缺点： 1. 用户代理可能由于其他原因而被伪造或不可靠， 2. “已知移动”设备的列表总是不完整的，并且 3. 该列表需要不断维护新设备。实践经验表明，这里没有可以使用的简单模式；甚至主要浏览器供应商也在报告的用户代理中进行了微妙的更改，这些更改多次破坏了这种方法。

屏幕分辨率可能是手机检测的最佳选择，因为这样您只关心硬事实：屏幕是否小。然而，确定“移动电话性”的分界点很困难。现代手机可以有一个大屏幕；据报道，iPhone 15 Pro 的屏幕为 2556 x 1179 像素。

触摸可用性最初是“这是手机吗？”的一个很好的近似，但现在通常包括带有触摸屏的笔记本电脑。您可以尝试再次检查用户代理来缩小误报范围。

因此，如果您了解自己的用户群，则可以使用这三种方法通过这种（伪代码）方法提出“足够好”的解决方案：

if (useragent_matches_known_touch_laptop) then is_probably_mobile = false;
else if (useragent_matches_a_known_phone) then is_probably_mobile = true
else if (has_touchscreen 
         AND min_screen_dimension_is_below_1000px) then is_probably_mobile = true

一旦您开始了解算法在实践中如何工作的更多信息，您就可以开始完善

useragent_matches_known_touch_laptop

和

useragent_matches_a_known_phone

检查。