Diciamo che voglio solo indirizzare ogni tablet e telefono, indipendentemente dalle dimensioni, c'è una query multimediale per questo? È possibile farlo senza specificare una taglia? Oppure l'utilizzo di una dimensione è l'unico modo per scegliere come target i dispositivi mobili e non i desktop?query media css: dispositivi mobili di destinazione senza specificare larghezza, rapporto pixel, ecc.
risposta
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.
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.
- 1. Come posso ottenere la larghezza di 'css-pixel' (media-query) usando Javascript?
- 2. bordi a doppia larghezza su dispositivi Android con un rapporto pixel CSS di 1,5
- 3. Tipo di supporto CSS: come caricare CSS per dispositivi mobili?
- 4. Stili css reattivi sui dispositivi mobili SOLO
- 5. Quale percentuale di browser per dispositivi mobili supporta le query multimediali CSS?
- 6. Query media di elementi CSS e larghezza degli elementi
- 7. Query media CSS per rilevare larghezza doppia l'altezza?
- 8. CSS media query e larghezza della finestra JavaScript non corrispondono
- 9. per dispositivi mobili
- 10. CSS media query per Samsung s6
- 11. CSS media query non funzionerà
- 12. Una query multimediale affidabile per rilevare solo iPad (o al massimo 1024x768 dispositivi mobili)
- 13. Query media CSS che si ignorano reciprocamente
- 14. Problemi con larghezza del viewport del 100% in dispositivi mobili?
- 15. CSS Media Queries
- 16. Query CSS media per densità pixel: -moz-min-device-pixel-ratio vs. min - moz-device-pixel-ratio
- 17. La query media min/max-larghezza non ha senso grammaticale
- 18. Media query e larghezza della barra di scorrimento
- 19. Esiste un database di valori di "pixel pixel ratio" per vari dispositivi?
- 20. come animare senza problemi altezza in CSS o Javascript sui dispositivi mobili
- 21. SignalR e dispositivi mobili
- 22. Variabili in Stylus CSS Media Query
- 23. Come rendere automaticamente la larghezza del corpo uguale alla larghezza del dispositivo nella media query CSS3?
- 24. iPhone 5 dimensioni dello schermo VS CSS media query
- 25. Fogli di stile dello schermo e dei dispositivi mobili
- 26. Prestazioni CSS con query multimediali
- 27. Perché i pixel sono mobili?
- 28. Accesso alle regole di query media CSS tramite JavaScript/DOM
- 29. Media Css per Iphone6 e Iphone6 plus
- 30. Definizione della larghezza/altezza css in unità indipendenti dal dispositivo?
La larghezza massima del dispositivo viene segnalata da Chrome prima che qualcuno percorra questo percorso. – eighteyes
Immagino che sia nuovo allora, ma aggiornerò la mia risposta. Grazie! –
Ho dovuto interrompere le mie query sui media solo per ambizione e utilizzare JS per scegliere come target finestre di browser più piccole. – eighteyes