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

Question

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?

Answer 1

Vous pouvez utiliser @media queries:

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

Cette version sera la cible de l'iPhone (et tout autre appareil avec un écran de max-device-width de 480px.

Apple, de l'iPhone, si ce n'est de mémoire donc je ne peux pas être tout à fait sûr de sa précision, a choisi d'ignorer l'utilisation de l' handheld ou mobile feuilles de style, car il, et d'autres appareils iOS, étaient capables de rendu css plus ou moins sur un pied d'égalité avec les navigateurs de bureau, via Safari. Pour les autres périphériques, je n'en suis pas sûr, exactement, comment fidèles, ils sont, si la Une Liste, en dehors de l'article (liés à la ci-dessus) donne un bref d'exécution par le biais de certains.

---

Édité

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, droid X est 854x480). Est-il possible de détecter ceux-là? Je ne pense pas que les personnes sont traitées avec cette requête.

Je suis incapable de dire pour certains, depuis, je n'ai pas accès à ces dispositifs, cependant, un autre Une Liste Outre l'Article: Responsive Web Design note que:

Heureusement, le W3C a créé des requêtes de média dans le cadre de la spécification CSS3, de l'amélioration de la promesse de types de médias. Une requête de média permet de cibler non seulement pour certaines catégories d'appareils, mais d'inspecter les caractéristiques physiques de l'appareil rendu de notre travail. Par exemple, à la suite de la hausse récente de la téléphonie mobile WebKit, les requêtes de média est devenu populaire côté client technique pour fournir une mesure de la feuille de style pour l'iPhone, les téléphones Android, et leurs semblables.

Donc, je présume qu'ils, les appareils Android, doit être la cible mesure par @media-queries, mais, comme indiqué, je suis incapable de le dire avec certitude.

Périphérique cible résolution, il est 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: W3 Candidat Recommandation pour questions des médias.

Answer 2

À partir de ce site il y a quelques autres requêtes de média qui sont utiles dans le ciblage iphone/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 été en mesure d'utiliser avec succès le max-device-width requête de média pour cibler avec succès les téléphones Android, bien que j'ai dû régler la largeur de 800px plutôt que de l'480 répertoriés. Pour l'iPhone 4, l'-webkit-min-device-pixel-ratio travaillé pour cible l'iPhone4 (max-device-width: 480px n'a pas, je suppose que l'objectif est de cibler l'iPhone3, mais n'a pas eu une pratique de test).

Je peux voir ce qui devient assez gênant, mais si vous avez à supporter une multitude d'appareils et d'avoir CSS personnalisé pour chacun d'eux, tant qu'ils sont compatibles avec les media queries, il apparaît qu'il est possible de faire ce que vous avez à peaufiner chaque plate-forme. Et oui, j'aurais du code des normes d'abord, afin que, comme beaucoup de CSS est réutilisable, mais de nombreuses fois, nous parlons de présenter d'autres dispositions de ces journées de taille appropriée pour les appareils utilisés.

Answer 3

@media handheld ne concerne que les anciens minuscule proto-html les téléphones portables des années antérieures qui ne pouvait même pas vraiment d'afficher les pages web. Le ePUB, MOBI, Tablette, communauté de vendeurs de toutes dit avec insistance "H*ck non, nous n' @media handheld de périphériques!", parce qu'ils ont été correctement inquiet que ce serait de la terre pour toujours dans un no man's land " asservi "réel" des pages web.

Aujourd'hui, avec nos petits appareils à très haute résolution affiche nous n'avons pas encore un bon moyen de dire HTML comment faire pour afficher les choses "correctement" sur de grands écrans avec une résolution relativement faible contre les petits écrans à très haute résolution. Et en tant que certifié vieux con mes yeux tiens à vous rappeler que, non, la réponse n'est pas juste pour faire de tout, y compris les polices 2X plus petit.