La page Bootstrap simple n'est pas responsive sur l'iPhone

Question

J'ai téléchargé un exemple de Twitter Bootstrap et j'ai créé un projet Rails simple avec. J'ai copié le css où c'était nécessaire et cela s'affiche correctement. J'ai également copié le js et tout fonctionne très bien sur mon ordinateur de bureau : cela réorganise la page lorsque je change la taille de mon navigateur. Lorsque j'utilise des "outils de test de design responsive" avec différentes tailles, cela fonctionne très bien.

Le problème que j'ai est sur mon iPhone : cela s'affiche exactement comme sur mon bureau.

Quand j'essaie la page d'exemple Bootstrap Hero (à partir de laquelle j'ai commencé), cela fonctionne très bien sur mon iPhone.

Qu'est-ce qui pourrait ne pas fonctionner ? Je n'ai pratiquement pas touché au CSS, j'ai juste ajouté un padding sur le footer.

Pour information, le CSS que j'ai changé est que je lie mon application à application.css avec le contenu suivant :

/* Feuille de style de l'application */

@import url(bootstrap.css);
@import url(bootstrap-responsive.css);

/* Corps */
body {
    padding-top: 60px;
    padding-bottom: 40px;   
}   

/* Footer */
footer {
    padding: 20px 0;
}

Answer 1

Assurez-vous d'ajouter :

à votre .

J'ai eu un problème similaire et j'ai pensé à tort que c'était juste une question de largeur de viewport.

Mise à jour : consultez la réponse de @NicolasBADIA pour une version plus complète.

Answer 2

Le code proposé par frntk ne fonctionne pas lorsque vous tournez l'appareil en vue paysage, et la solution donnée par virtualeyes est incorrecte car elle utilise des points-virgules au lieu de virgules. Voici le code correct :

Source: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Answer 3

Accordé, un cas très spécifique, mais qui vaut la peine d'être mentionné.

Si vous utilisez la redirection de domaine via votre Fournisseur de DNS, votre site peut se retrouver enveloppé dans un iframe. GoDaddy, par exemple, utilise cette technique si vous masquez votre domaine et faites une redirection.

Answer 4

J'étais bloqué sur ce problème pendant plusieurs heures.

N'oubliez pas également de placer le contenu à l'intérieur d'un

...