2012-03-30 13 views
6

Possiedo un sito Web "reattivo" ma ci sono alcuni collegamenti che desidero solo su "browser pc" e non su "tablet landscape" perché si collegano agli oggetti flash.Tablet orizzontale specifico con query multimediali

Finora questo è quello che ho fatto, ma non è una correzione al 100% come alcuni tablet Android come 'Lenovo Think Pad' che hanno uno schermo più grande.

sto lì con i media query per rendere il mio sito reattivo e questo è quello che sto attualmente in uso ...

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

È eventuali correzioni CSS si può pensare?

Grazie in anticipo Tash: D

risposta

2

Utilizzando media query in realtà non è la tecnica appropriata per rilevare se Flash è supportato o meno. Il mio suggerimento sarebbe quello di determinare questo utilizzando JavaScript e assegnare una classe all'elemento body come "no-flash". La vostra JavaScript potrebbe essere simile a questo:

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

Poi, il CSS potrebbero essere i seguenti:

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

Nota: il codice Javascript che controlla il plugin navigatore viene da Here.

0

Quando si è usando l'orientamento: orizzontale, devi considerare se il popup della tastiera cambierà la visualizzazione, una volta che la dimensione della larghezza è maggiore della dimensione dell'altezza, il css la considererà come orizzontale.

Problemi correlati