0

I am trying to make my website responsive. My website is essentially all one page and I use a simple jQuery scroll function to navigate to different sections. It works fine for desktop or laptop computers but doesn't really work when you view it on mobile or tablet especially in portrait. So I wrote a jQuery function that turns each section of my website into a tab instead of it scrolling. So for example if you click the "Work" section it appears as if you are going to a different page. What I would ultimately like to do is use both functions the "scroll" on my computer and the "tab" on mobile and tablet. Using @media handheld can I call the "tab" function? Or do I need to create an "if statement that can determine where the website is being accessed from? Below is the code for my tab function.

$(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
4

1 回答 1

0

最好的方法是使用window.matchMedia并且有一些库可以帮助你喜欢:

https://github.com/sparkbox/mediaCheck带有使用的后备window.resize

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

于 2013-05-11T00:21:00.513 回答