CSS media query sur iPhone

Je suis en train d'utiliser un CSS media query, ciblant spécifiquement l'iPhone.

Il fonctionne quand j'utilise un lien régulier rel:

<link rel="stylesheet" type="text/css" href="css/mobile.css" />

Cependant, lorsque j'essaie cette requête de média, il ne fonctionne pas:

<link rel="stylesheet" type="text/css" href="css/mobile.css" 
      media="only screen and (max-width: 640px)" />

Comment puis-je utiliser un CSS media query pour cible l'iPhone?

OriginalL'auteur Ryan | 2011-05-31

  1. 14

    Essayer:

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

    La différence est max-device-width au lieu de simplement max-width. Voir aussi 2) sur http://blogs.sitepoint.com/iphone-development-12-tips/.

    D'accord avec @bensnider. Si vous avez un iPhone pour tester sur plug dans ce lien: jensbits.com/demos/mq Il vous permet de tester les différents médias, les paramètres de requête.
    Génial - merci @bensnider
    max-device-width fonctionne très bien (max-width n' -> iOS 5, xCode 4.2). J'utilise WebView pour afficher du texte formaté (sur la page, il est également utilisé pour Android et Chrome app) sur iPhone/iPad. Par style/css je de contrôle de la taille de police et d'autres.

    OriginalL'auteur bensnider

  2. 4

    Je sais que ce n'est pas exactement ce que vous avez demandé, mais je viens de répondre à quelque chose de similaire et pourraient vous aider:

    <meta name='viewport' content='width=device-width; initial-scale=1.0;' />

    Il y a beaucoup de paramètres pour le CONTENU, certains d'entre eux sont:

    maximum-scale=3.0; //Maximum zoom allowed 0 to 10.0. default is 1.6
minimum-scale=0.5; //Minimum zoom allowed 0 to 10.0. default is 0.25
user-scalable=1; //YES/NO
width=device-width; //default if not set is 980px 
initial-scale=1.0; //Initial zoom. 0 to 10.0. 1.0 would be 100%
height=device-height;

    Contenu dans UIWebView sur iOS 3.1.3 apparaît zoom sur mais sur iOS 4.3 apparaît amende

    Edit: Vous pouvez utiliser ces paramètres dans Safari aussi, oublier la uiwebview chose c'est juste pour les applications natives.

    Ces paramètres sont grands, toutefois, il n'a pas répondu à ma question. Je ne peux pas obtenir ce pour cible l'iPhone.
    juste au cas où quelqu'un va copier le ci-dessus.. la ligne correcte est: <meta name="viewport" content="width=device-width, initial-scale=1.0">
    quoi de mal avec une APOSTROPHE?

    OriginalL'auteur Nicolas S