2013-03-15 11 views
8

Sto trovando che IE9 sta assumendo stili di tablet per il mio sito.Come target tablet ma non IE9 utilizzando una query multimediale

@media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait), 
     (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) 
{ 
    /* tablet styles */ 
} 

La query multimediale sopra riportata viene applicata in IE9 quando la larghezza del browser è 1024px.

Dopo aver svolto alcune ricerche, ho trovato la seguente domanda/soluzione e offre una spiegazione del perché questo sta accadendo.

Media query not working in IE9

Da quello che posso dire, si tratta di IE9 non interpretare "min-device-width" e "max-device-width".

In base a http://msdn.microsoft.com/library/ms530813.aspx non supporta queste proprietà, solo "min-larghezza" e "max-larghezza".

Inoltre, http://www.w3.org/TR/css3-mediaqueries/#error-handling afferma che il browser deve ignorare le proprietà che non riconosce . Non così con IE9 sembra.

Ho anche trovato questa domanda: Common breakpoints for media queries on a responsive site ma non mi dà una soluzione.

Come posso applicare il foglio di stile solo ai tablet e non ai browser desktop come IE9 con una larghezza di 1024px?

risposta

2

È necessario aggiungere questo meta tag nel <head> del documento:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

E poi nel CSS è possibile sostituire:

  • min-device-width con min-width
  • max-device-width con max-width.
+0

@Tom: questa soluzione è stata d'aiuto? – tw16

+1

Sì, ho aiutato, non mi ero reso conto che avresti potuto farlo con le votazioni in su. Ho comunque trovato che altri browser stavano prendendo gli stili di tablet comunque. La soluzione che ho trovato era https://github.com/barisaydinoglu/Detectizr per rilevare i tablet e quindi caricare manualmente il foglio di stile. Stavo per fare ulteriori ricerche – Tom

+0

Mi dispiace, ho frainteso la domanda. Non avevo capito che volevi solo che il css venisse applicato ai tablet e non ai computer con schermi delle stesse dimensioni dei tablet. Di interesse, c'è qualche ragione per cui vuoi indirizzare i tablet in modo specifico? Gli stili di tablet non sarebbero altrettanto utili per gli schermi dei piccoli computer? – tw16

Problemi correlati