web-dev-qa-db-fra.com

Les navigateurs iPhone/Android prennent-ils en charge l'ordinateur de poche CSS @media?

Je souhaite modifier ma page Web CSS pour les navigateurs Web fonctionnant sur des téléphones portables, tels que l'iPhone et Android. J'ai essayé quelque chose comme ça dans le fichier CSS:

@media handheld {
  body {
    color: red;
    }
  }

Mais cela ne semble pas avoir d'effet, du moins sur l'iPhone. Comment puis-je écrire mon CSS pour travailler différemment sur l'iPhone, etc., idéalement sans utiliser javascript?

iphoneandroidcssmedia
47
Colen

Vous pouvez utiliser @media media :

<link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)"/>

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

Apple, pour l'iPhone, bien que ce soit de mémoire, je ne peux donc pas être tout à fait sûr de son exactitude, a choisi de ne pas tenir compte de l'utilisation des feuilles de style handheld ou mobile, car il et d'autres appareils iOS étaient capables de restituer les fichiers CSS plus ou moins. sur un pied d'égalité avec 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 de A List Apart (lié à ci-dessus) en donne un bref aperçu.

Edited en réponse au commentaire de @Colen:

Hmm, il semble que beaucoup de nouveaux appareils mobiles ont des résolutions plus élevées (par exemple, le droïde X est 854x480). 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 suis incapable de dire avec certitude, car je n’ai pas accès à ces appareils, cependant un autre Un article à part - Une conception Web réactive note que:

Heureusement, le W3C a créé des requêtes multimédia dans le cadre de la spécification CSS3, améliorant ainsi les promesses des types de média. Une requête de média nous permet de cibler non seulement certaines classes de périphériques, mais également d’inspecter les caractéristiques physiques du périphérique rendant notre travail. Par exemple, suite à la récente montée en puissance de WebKit sur mobile, les requêtes des 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 présume que, les appareils Android, doivent pouvoir être ciblés par @ media-queries, mais, comme je l'ai indiqué, je suis incapable de dire avec certitude.

Pour cibler la résolution de l'appareil, voici un exemple de:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />

Pour en savoir plus: Recommandation du candidat W3 pour les requêtes des médias .

35
David Thomas

Depuis ce site , il existe quelques autres requêtes multimédia utiles pour cibler les iPhones/téléphones 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 multimédia max-device-width pour cibler avec succès les téléphones Android, bien que je devais ajuster la largeur jusqu'à 800 pixels au lieu des 480 répertoriés. Pour l'iPhone 4, le rapport -webkit-min-device-pixel-ratio fonctionnait de manière à cibler l'iPhone4 (la largeur maximale de l'appareil: 480 pixels pas, je présume que cela ciblera l'iPhone3 mais n'en a pas un pratique à tester.)

Je peux voir que cela devient assez compliqué, mais si vous devez prendre en charge une multitude de périphériques et disposer de CSS personnalisés pour chacun d'eux, tant qu'ils prennent en charge les requêtes multimédia, il apparaît qu'il est possible de faire ce que vous devez pour modifier chaque plate-forme. . Et oui, je coderais d’abord en respectant les normes, de sorte que la plus grande partie de la CSS soit utilisable, mais il est souvent question de présenter des présentations alternatives de taille appropriée, adaptées aux appareils utilisés.

29
LocalPCGuy

@media handheld fait uniquement référence aux anciens téléphones cellulaires proto-html antiques, qui ne pouvaient même pas afficher de pages Web. EPUB, MOBI, Tablet, communauté de fournisseurs ont tous déclaré avec insistance: "H * ck non, nous sommespas@media handheld périphériques!" parce qu'ils craignaient à juste titre que cela ne les débarque pour toujours dans un no man's land subordonné à de "vraies" pages Web.

Avec les petits appareils actuels avec des écrans de très haute résolution, nous n'avons toujours pas le bon moyen de dire à HTML comment afficher les choses "correctement" sur de grands écrans avec une résolution relativement basse par rapport aux petits écrans avec une très haute résolution. Et en tant que vieux fou certifié, mes yeux aimeraient vous rappeler que non, la solution ne consiste pas simplement à tout réduire, y compris les polices 2X.

19
Jim Adcock

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

5
Jonas Äppelgran

Regardez en utilisant la requête des médias «survoler».

Mettez ceci dans votre fichier SCSS:

// At this point the CSS would target screens above 990px - but only
// if they support hover (i.e. 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 exécuté grunt etc sur le SCSS, cela produira un CSS ressemblant à ceci:

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