Question

我以模态形式登录我的应用

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

但它不是，因为重定向不是那么快，所以用户可以先看一个模态，然后再重定向。

最好的方法是什么？

Answer 1

我怎么能看不到？

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

在移动广告

1 个答案: