web-dev-qa-db-fra.com

Requête de média CSS pour cibler uniquement les appareils iOS

Existe-t-il une requête @media visant uniquement les appareils exécutant iOS?

Par exemple:

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

Est-ce que cela modifierait également le comportement de la page sur Android appareils avec ces largeurs d'appareil?

cssmedia-queries
79
user1443063

Oui, vous pouvez.

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

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

YMMV.

Cela fonctionne parce que seulement Safari Mobile implémente -webkit-overflow-scrolling: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

Veuillez noter que @supports ne fonctionne pas dans IE. IE ignorera les deux blocs @support ci-dessus. Pour en savoir plus, voir https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/ . Il est recommandé de ne pas utiliser @supports not pour cette raison.

177
Jonathan Lin

Réponse courte Non. CSS n'est pas spécifique aux marques.

Vous trouverez ci-dessous les articles à implémenter pour iOS avec un support uniquement.

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

http://stephen.io/mediaqueries/

Enfait, vous pouvez utiliser PHP, Javascript pour détecter le navigateur iOS et ensuite appeler un fichier CSS. Par exemple

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

7
Prime

Comme mentionné ci-dessus, la réponse courte est non. Mais j'ai besoin de quelque chose de similaire dans l'application sur laquelle je travaille actuellement, mais les zones dans lesquelles le code CSS doit être différent sont limitées à des zones très spécifiques d'une page.

Si vous êtes comme moi et que vous n'avez pas besoin de servir une feuille de style complètement différente, une autre option serait de détecter un périphérique sous iOS de la manière décrite dans la réponse choisie de cette question: Détecter si le périphérique est iOS) =

Une fois que vous avez détecté le périphérique iOS, vous pouvez ajouter une classe à la zone que vous ciblez à l'aide de Javascript (par exemple, la document.getElementsByTagName("yourElementHere")[0].setAttribute("class", "iOS-device");, jQuery, PHP ou autre, et styliser cette classe en conséquence en utilisant la feuille de style préexistante.

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