Query media CSS per targetizzare solo iPad e iPad?

Ciao sto lavorando con più dispositivi tablet, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad e così via.

  • iPad: 1024 x 768
  • LG Pad – 1280 x 768
  • Galaxy Tab – 1280 x 800

Voglio scegliere come target solo l’iPad utilizzando la query multimediale CSS3. Poiché, la larghezza del dispositivo di LG e iPad è la stessa 768px – ho problemi a separare ogni dispositivo.

Ho provato a seguire per separare, ma non sembra funzionare:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */ @media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */ @media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */ 

Non conosco le opzioni –webkit-device-pixel-ratio e other -webkit * e i loro valori per target per iPad. Non voglio usare JavaScript per stili, idee?

Finalmente trovato una soluzione da: Rileva diverse piattaforms di dispositivi usando CSS

   

Per ridurre la chiamata HTTP, è ansible utilizzarla anche all’interno del file CSS comune esistente:

 @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { .ipad-portrait { color: red; } /* your css rules for ipad portrait */ } @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) { .ipad-landscape { color: blue; } /* your css rules for ipad landscape */ } 

Spero che questo ti aiuti.

Altre referenze:

Sono un po ‘in ritardo per rispondere a questo, ma nessuno dei precedenti ha funzionato per me.

Questo è ciò che ha funzionato per me

 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { //your styles here } 

Beh, proprio la stessa domanda e c’è anche una risposta =)

http://css-tricks.com/forums/discussion/12708/target-ipad-ipad-only./p1

 @media only screen and (device-width: 768px) ... @media only screen and (max-device-width: 1024px) ... 

Al momento non posso testarlo quindi per favore testalo =)

Ne ho trovati anche altri:

http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

O controlli il navigatore con qualche javascript e generi / aggiunga un file css con javascript

È necessario indirizzare il dispositivo al suo agente utente, utilizzando alcuni script. L’agente utente per l’iPad è:

 Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 
   orientation and device detection in css3          
iphone landscape
iphone portrait
ipad landscape
ipad portrait
htc desire landscape
htc desire portrait
desktop