Html 在移动设备上重定向而不是模式

我已以模式形式登录到我的应用程序

<div class="user-link login" data-toggle="modal" data-target="#loginModal">Log in</div>

登录

但当用户在移动设备上时，我希望将他重定向到example.com/login，而不是向他显示模式。我不希望php或js检测因为速度，更好的解决方案是基于css的分辨率，不是吗

我认为这是一个解决办法

<a href="{{ path('login') }}" title="Log in" class="onlyMobile">
   <div class="user-link login" data-toggle="modal" data-target="#loginModal">Log in</div>
</a>

<style>
    @media only screen and (min-width : 992px) {
        .onlyMobile {
            display: none;
        }
    }
</style>

@仅介质屏幕和（最小宽度：992px）{
.仅限移动{
显示：无；
}
}

但事实并非如此，因为重定向速度不太快，所以用户可以先看到模式，然后再重定向

最好的方法是什么

我怎么能看不见

<a href="{{ path('login') }}" title="Log in" class="user-link login mobileOnly">Log in</a>
<a class="user-link login desktopOnly" data-toggle="modal" data-target="#loginModal">Log in</a>

<style>
    @media only screen and (min-width : 992px) {
        .mobileOnly {
            display: none !important;
        }
    }

    @media only screen and (max-width : 992px) {
        .desktopOnly {
            display: none !important;
        }
    }
</style>

登录
@仅介质屏幕和（最小宽度：992px）{
.移动{
显示：无！重要；
}
}
@仅介质屏幕和（最大宽度：992px）{
.desktopOnly{
显示：无！重要；
}
}

您可以将模态设置为隐藏状态，并将其显示给不在手机上的用户，您可以为模态的出现制作平滑的动画，或者做一些看起来更好的事情？