query multimediali css: indirizza i dispositivi mobili senza specificare larghezza, rapporto pixel, ecc

Question

Diciamo che voglio solo scegliere come target ogni tablet e telefono, indipendentemente dalle dimensioni, esiste una query multimediale per questo?È possibile farlo senza specificare una taglia?Oppure utilizzare una dimensione è l'unico modo per scegliere come target i dispositivi mobili e non i desktop?

Answer 1

Nella specifica CSS3 , viene menzionato @media handeld ma forse non ha il supporto del browser.

Quindi no.

Tuttavia, potresti trovare utile questo sito , perché spiega altri alcuni media querytecniche per dispositivi mobili.

Answer 2

Ho lottato con questo per alcuni giorni, ma un buon modo per verificare la presenza di dispositivi portatili è la larghezza massima del dispositivo.I PC desktop non lo inviano al browser, ma la maggior parte (se non tutti) i palmari lo utilizzano.

Nel mio caso volevo mostrare una versione compressa del sito su tutti i dispositivi (desktop compreso) quando al di sotto di una certa larghezza, per la quale ho utilizzato

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

Ma un certo popup in overlay che utilizzava position: fixed doveva essere modificato solo sui palmari (perché la proprietà css funziona in 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 scelgo come target tutti i palmari inferiori a 640 ma non i browser desktop.Per inciso, anche questo non si rivolge agli iPad (che è come lo volevo) perché ha una larghezza del dispositivo maggiore di 640 px.

Se desideri scegliere come target tutti i dispositivi, scegli una larghezza minima bassa (1 px) in modo che non escluda alcun dispositivo indipendentemente dalla larghezza.

Answer 3

Non credo che avrai troppa fortuna con un approccio css puro.Ti consigliamo di fare qualcosa sulla falsariga dell'approccio modernizer.js e noi JS per rilevare il dispositivo e aggiungere un nome di classe al corpo in base a quello.

Qual è il modo miglioreper rilevare un dispositivo mobile in jQuery?

Quindi includi quella classe nelle tue media query su dispositivi mobili per casi speciali di varie dimensioni.