CSS-Medienabfrageziel nur iOS-Geräte

Question

Gibt es eine @ media-Abfrage, die nur auf die iOS-Geräte gerichtet ist?

Beispiel:

@media (min-device-width:320px) and (max-device-width:768px) { 
#nav { 
yada:yada; 
} 
} 

würde dies auch das Verhalten der Seite, auf Android-Geräten mit dieser Breite Perspektiven verändern? Oder bin ich falsch mit diesem letzten

Answer 1

Kurze Antwort Nr. CSS ist nicht markenspezifisch.

Im Folgenden finden Sie die Artikel für iOS, die nur Medien verwenden.

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://stephen.io/mediaqueries/

Infact Sie PHP, Javascript, um das iOS-Browser zu erkennen und nach, dass CSS-Datei aufrufen können Sie verwenden können. Zum Beispiel

http://www.kevinleary.net/php-detect-ios-mobile-users/

Answer 2

Wie oben erwähnt, ist die kurze Antwort nein. Aber ich brauche etwas Ähnliches in der App, an der ich gerade arbeite, aber die Bereiche, in denen das CSS anders sein muss, sind auf sehr spezifische Bereiche einer Seite beschränkt.

Wenn Sie wie ich sind und brauchen nicht eine ganz andere Stilvorlage zu dienen, wäre eine weitere Option sein, ein Gerät zu erkennen mit iOS in der Art und Weise in dieser Frage ist frei gewählte Antwort: Detect if device is iOS

Sobald Sie habe das iOS-Gerät erkannt Sie eine Klasse in den Bereich hinzufügen können Sie Targeting verwenden Javascript (z. B. die document.getElementsByTagName("yourElementHere")[0].setAttribute("class", "iOS-device");, jQuery, PHP oder was auch immer, und Stil, Klasse, um die bereits bestehenden Sheet entsprechend verwenden.

.iOS-device { 
     style-you-want-to-set: yada; 
} 

Answer 3

Ja, Sie können das.

@supports (-webkit-overflow-scrolling: touch) { 
    /* CSS specific to iOS devices */ 
} 

@supports not (-webkit-overflow-scrolling: touch) { 
    /* CSS for other than iOS devices */ 
} 

YMMV.

Es funktioniert, weil nur Mobile Safari implementiert es: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling