Question

我正在尝试让我的网站响应。我的网站基本上都是一个页面，我使用一个简单的jQuery滚动功能导航到不同的部分。它适用于台式机或笔记本电脑，但在移动设备或平板电脑上查看时尤其是纵向显示无法正常工作。所以我写了一个jQuery函数，将我网站的每个部分变成一个标签，而不是滚动。因此，例如，如果您单击“工作”部分，则会显示您将转到其他页面。我最不想做的是使用我的电脑上的“滚动”和手机和平板电脑上的“标签”这两个功能。使用@media掌上电脑我可以调用“标签”功能吗？或者我是否需要创建一个“if语句，可以确定从哪里访问网站？下面是我的标签功能的代码。

$(document).ready(function() {
    $('.tabs a').click(function(){
        var $this = $(this);
        $('.panel').hide();
        $('.tabs a.active').removeClass('active');
        $this.addClass('active').blur();
        var panel = $this.attr('href');
        $(panel).fadeIn(1000);
        return false;
    });//end click
    $('.tabs li:first a').click();
}); // end ready

Answer 1

最好的方法是使用window.matchMedia，并且有一些库可以帮助您：

https://github.com/sparkbox/mediaCheck使用window.resize

的后备广告

如果你想进一步阅读关于这一点的一些好东西，请阅读this文章，因为它描述了很多这类性质的东西。

在使用@media掌上电脑时如何使用jQuery触发不同的功能？

1 个答案: