Yocker
  1. Yocker
  3. Query media CSS per targetizzare solo iPad e iPad?
Intereting Posts
Il nome della proprietà è parte delle informazioni chiave dell’object e non può essere modificato. Entity Framework Qual è la differenza tra operatore “=” e “==” in Bash? Elimina la linea specifica da un file di testo? Ottieni contenuti di appunti attuali? Rota l’associazione di query di record triggers con “esiste” Perché lanciamo sockaddr_in a sockaddr quando chiamiamo bind ()? Esiste un algoritmo che indica la somiglianza semantica di due frasi Sono std :: elementi vettoriali garantiti contigui? Come aggiungere una convalida personalizzata a un modulo AngularJS? Spiega questo frammento di codice haskell che emette un stream di numeri primi Crea il servizio Windows dal file eseguibile Selezione jQuery in base al testo Meccanismo di blocco dei file SFTP Ottieni valori da Process StandardOutput Come posso fare riferimento al tag script che ha caricato lo script attualmente in esecuzione?

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