Les navigateurs iPhone / Android prennent-ils en charge CSS @media handheld?

Vous pouvez utiliser les requêtes @media :

Cette version particulière visera l’iPhone (et tout autre appareil avec un écran de max-device-width de 480px .

Apple, pour l’iPhone, bien que cela vienne de la mémoire, je ne peux donc pas être tout à fait sûr de sa précision, j’ai choisi de ne pas utiliser mobile feuilles de style mobile ou mobile au même titre que les navigateurs de bureau, via Safari. Pour les autres appareils, je ne sais pas exactement à quel point ils sont fidèles, bien que l’article A List Apart (lié ci-dessus) donne un bref aperçu de certains.

Edité en réponse à un commentaire de @Colen:

Hmm, il semble que beaucoup de nouveaux appareils mobiles ont des résolutions plus élevées (par exemple, droid X est 854×480). Y a-t-il un moyen de les détecter? Je ne pense pas que ceux-ci sont traités avec cette requête.

Je ne suis pas en mesure de dire avec certitude, car je n’ai pas access à ces appareils, mais un autre article A List Apart: Responsive Web Design note que:

Heureusement, le W3C a créé des requêtes médias dans le cadre de la spécification CSS3, améliorant ainsi la promesse des types de supports. Une requête de média nous permet de cibler non seulement certaines classes de périphériques, mais également de vérifier les caractéristiques physiques du périphérique qui rend notre travail. Par exemple, suite à la montée récente de WebKit mobile, les requêtes médias sont devenues une technique populaire côté client pour fournir une feuille de style personnalisée à l’iPhone, aux téléphones Android et à leurs semblables.

Donc, je suppose qu’ils, les appareils Android, doivent pouvoir être ciblés par @ media-queries, mais, comme indiqué, je ne peux pas dire avec certitude.

Pour cibler la résolution de périphérique, il existe un exemple de:

Lectures complémentaires: Recommandation du candidat W3 pour les requêtes médias .

À partir de ce site, il existe quelques autres requêtes multimédias utiles pour cibler les téléphones iPhone / Android:

  // target mobile devices @media only screen and (max-device-width: 480px) { body { max-width: 100%; } } // recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display @media only screen and (-webkit-min-device-pixel-ratio: 2) { // CSS goes here } // should technically achieve a similar result to the above query, // targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi) @media only screen and (min-resolution: 300dpi) { // CSS goes here } 

J’ai réussi à utiliser la requête média max-device-width pour cibler avec succès des téléphones Android, bien que je devais ajuster la largeur à 800px plutôt qu’aux 480 listés. Pour l’iPhone 4, le ratio -webkit-min-device-pixel a fonctionné pour cibler l’iPhone4 (max-device-width: 480px ne l’ont pas fait, je présume que cela ciblera l’iPhone3 mais n’en a pas à tester).

Je peux voir que cela devient assez compliqué, mais si vous devez supporter une multitude de périphériques et avoir des CSS personnalisés pour chacun d’eux, tant qu’ils supportent les requêtes média, il apparaît qu’il est possible de faire ce que vous devez pour modifier chaque plateforme. . Et oui, je coderais tout d’abord selon les normes, de sorte que autant de CSS soit utilisable, mais nous parlons souvent de présenter des mises en page alternatives ces jours-ci, adaptées aux périphériques utilisés.

@media handheld réfère uniquement aux anciens minuscules téléphones portables proto-html des années passées qui ne pouvaient même pas afficher les pages Web. La communauté ePUB, MOBI, Tablet, les vendeurs ont tous insisté sur le fait que “H * ck non, nous ne sums pas @media handheld appareils @media handheld !” parce qu’ils craignaient à juste titre que cela les amène à jamais dans un no man’s land asservi à de “vraies” pages Web.

Avec les petits appareils d’aujourd’hui avec des écrans à très haute résolution, nous n’avons toujours pas de moyen de dire à HTML comment afficher les choses “correctement” sur les grands écrans avec une résolution relativement basse comparée aux petits écrans avec une très haute résolution. Et en tant que vieux péter certifié, mes yeux voudraient vous rappeler que non, la réponse ne consiste pas simplement à tout réduire, y compris les fonts 2 fois plus petites.

Non, ni les navigateurs iPhone ou Android ne prennent en charge CSS @media handheld .

Regardez à l’aide de la requête multimédia ‘hover’.

Mettez ceci dans votre fichier SCSS:

 // At this point the CSS would target screens above 990px - but only // if they support hover (ie laptops, PC's etc). $point-at-which-use-large-screens: (min-width 990px) (hover hover); .some-class-you-want-to-target { // Some CSS to only apply to larger screens with mouse available. @include breakpoint($point-at-which-use-large-screens) { color: red; } } 

Après avoir lancé grunt etc. sur le SCSS, cela produira un CSS ressemblant à:

 @media (min-width: 991px) and (hover: hover) { color:red; }