Tablet landscape specific with media queries

Question

I have a 'responsive' website but there are some links I only want on 'pc browsers' only and not on 'tablet landscape' becasue they link off to flash objects.

So far this is what I have done but it't not a 100% fix as some android tablets such as 'Lenovo think pad' which have a bigger screen.

I am using media queries to make my site responsive and this is what I'm currently using...

@media only screen  
and (max-device-width : 1024px)     
and (orientation:landscape)
{
    header.Site
    {
        nav.Site > ul > li { line-height: 2 ; }

        div.BidSessionCountdown,
        a.LiveOnline { display: none; }
    }
}

Is there any CSS fixes you can think of?

Thank you in advance Tash :D

Answer 1

Using media queries isn't really the appropriate technique to detect if flash is supported or not. My suggestion would be to determine this using JavaScript, and assign a class to the body element such as "no-flash". Your JavaScript might look like this:

//Using jQuery here
if(typeof navigator.plugins['Shockwave Flash'] == 'undefined') {
    $('body').addClass('no-flash');
}

Then, your CSS could be as follows:

body.no-flash a.LiveOnline {
    display:none;
}

Note: The javascript code that checks the navigator plugin comes from Here.