Ho già letto quasi tutte le domande StackOverflow relative a questo problema, ma nulla funziona come mi aspettavo.Una query multimediale affidabile per rilevare solo iPad (o al massimo 1024x768 dispositivi mobili)
E 'stato chiesto a me di rilevare solo il dispositivo iPad (o nella migliore delle ipotesi ~ dispositivo 1024x768 cellulare) con una media query. Ho cercato di usare
@media screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
...
}
ma questo media query corrisponde anche a Chrome (e Safari, immagino) su computer portatili e desktop di Win32/MacOS quando la risoluzione è impostata a 1024x768 (ma non Firefox). Ho provato questa query multimediale che definisce orientation:portrait e orientation:landscape ma senza fortuna. È anche riconosciuto sul browser webkit desktop.
È possibile provare this fiddle per verificare il problema.
Dopo la ricerca sono venuto a this interesting article in cui è riportata
Penso Safari (e gli altri browser WebKit ho testato a) non seguono le specifiche, mentre Firefox e Opera sono.
La funzione di supporto "larghezza" descrive la larghezza dell'area di visualizzazione di destinazione del dispositivo di uscita. Per i media continui, questa è la larghezza del viewport (come descritto da CSS2, sezione 9.1.1 [CSS21]) inclusa la dimensione di una barra di scorrimento renderizzata (se presente).
quindi provato questo (fiddle) con 1009px come max-device-width (1024-15)
@media screen and (min-device-width: 768px)
and (max-device-width: 1009px) {
...
}
e non funziona
ma se uso questo media query anche definire l'orientamento (fiddle)
@media screen and (device-width:768px) and (orientation:portrait),
screen and (device-width:1009px) and (orientation:landscape) {
...
}
sorprendentemente (per me) è sembra funzionare correttamente e sembra corrispondere solo a Safari/iPad.
Q: questa query multimediale è sufficientemente affidabile per le mie esigenze? Funziona sempre in iPad/iPad2? O devo aspettarmi alcuni casi limite e una corrispondenza inaspettata con qualche altra risoluzione del dispositivo? In questo caso puoi suggerire una query multimediale più efficiente e affidabile?
you :) Grazie (e scusa per la prolissità)
Qual è lo scopo esatto? Per esempio. il prossimo mese ci sarà un iPad 3 con una diversa risoluzione dello schermo. E sì - mi aspetterei che anche le altre tavolette corrispondessero. – Lennart
Lo scopo esatto è principalmente la corrispondenza ipad/ipad2. So che questo non ha molto senso in termini di RWD (qual è la differenza tra un cellulare e un desktop 1024x768? Dovrebbero essere considerati la stessa cosa IMHO) ma da quando mi ha chiesto di fare una cosa del genere in puro css, mi piacerebbe raggiungere questo - se è possibile, naturalmente. – fcalderan
Stai cercando di rendere un sito adatto per iPad? In questo caso, sarebbe meglio rendere il sito "touch" amichevole per tutti i dispositivi e in tal caso è possibile utilizzare librerie come modernizr per sniffare se il dispositivo supporta gli eventi touch (quindi è possibile cambiare il file css da renderizzare in javascript) – Skuld