Media-specific landscape

Question

I have a “responsive” website, but there are some links that I need only in “PC browsers” and not on “tablets”, because they connect to flash objects.

So far this is what I have done, but it is not a 100% fix, like some Android tablets, such as the Lenovo Think Pad, which have a larger screen.

I use media queries to make my site responsive, and this is what I am using now ...

@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; } } } 

Are there any CSS fixes you can think of?

Thanks in advance Tash: D

Answer 1

Using media queries is actually not a suitable technique for determining support for flash memory. My suggestion would be to define this using JavaScript and assign the 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 the navigator plugin checks comes from here.

Answer 2

When you use orientation: landscape, you need to think about whether the keyboard popup will change the image, as soon as the width is larger than the height, css will consider it as landscape.