2011-12-02 11 views

risposta

5

Nel numero CSS3 spec, è indicato @media handeld ma probabilmente non ha il supporto del browser.

Quindi, no.

Tuttavia, è possibile trovare utile this site, spiega altre tecniche di media query per dispositivi mobili.

6

Sono stato in difficoltà con questo per alcuni giorni, ma un buon modo per verificare la presenza di dispositivi palmari è la larghezza massima del dispositivo. I PC desktop non inviano questo al browser, ma la maggior parte (se non tutti) i palmari lo usano.

Nel mio caso ho voluto mostrare una versione compressa del sito su tutti i dispositivi (compresi i desktop), quando sotto di una certa larghezza, per cui ho usato

@media all and (max-width: 640px)

Ma un certo pop-up overlay che utilizzate position: fixed ha dovuto essere modificato solo sui palmari (poiché la proprietà css funziona su tutti i browser desktop ma non su tutti i palmari). Quindi, per questo ho usato una regola aggiuntiva:

@media all and (max-device-width: 640px)

In cui a indirizzare tutti i palmari di sotto di 640, ma non i browser desktop. Per inciso, anche questo non ha come target gli iPad (che è il modo in cui lo volevo) perché ha una larghezza del dispositivo superiore a 640 px.

Se si desidera utilizzare come target solo tutti i dispositivi, selezionare una larghezza minima ridotta (1px) in modo che non escluda alcun dispositivo indipendentemente dalla larghezza.

+2

La larghezza massima del dispositivo viene segnalata da Chrome prima che qualcuno percorra questo percorso. – eighteyes

+0

Immagino che sia nuovo allora, ma aggiornerò la mia risposta. Grazie! –

+0

Ho dovuto interrompere le mie query sui media solo per ambizione e utilizzare JS per scegliere come target finestre di browser più piccole. – eighteyes

0

Non penso che avrai troppa fortuna con un approccio css puro. Dovrai fare qualcosa seguendo le linee dell'approccio modernizer.js e noi JS per rilevare il dispositivo e aggiungere un nome di classe al corpo basato su quello.

What is the best way to detect a mobile device in jQuery?

quindi includere quella classe nelle multimediali query per dispositivi mobili caso particolare di varie dimensioni.

Problemi correlati