La page Bootstrap simple n'est pas réactive sur l'iPhone

StackOverflow https://stackoverflow.com/questions/9386429

Question

J'ai téléchargé Twitter Bootstrap Exemple et créé un projet de rails simples avec. J'ai copié le CSS si nécessaire et il s'affiche bien. J'ai également copié le JS et tout fonctionne très bien sur mon bureau: il réorganise la page lorsque je change la taille de mon navigateur. Lorsque vous utilisez des "outils de test de conception réactifs" avec différentes tailles, cela fonctionne très bien.

Le problème que j'ai est sur mon iPhone: il affiche des justes comme sur mon bureau.

Lorsque j'essaie la page d'exemple Bootstrap Hero (qui est celle que j'ai commencé), cela fonctionne très bien sur mon iPhone.

Qu'est-ce qui pourrait mal se passer? Je n'ai pratiquement pas touché à aucun CSS, je viens d'ajouter un rembourrage sur le pied de page.

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

/* Application stylesheet */

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

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

/* Footer */
footer {
    padding: 20px 0;
}
Était-ce utile?

La solution

Assurez-vous d'ajouter:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

à ton <head>.

J'ai eu un problème similaire et je pensais à tort que ce n'était qu'une question de largeur de la fenêtre.

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

Autres conseils

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

La source: https://developer.mozilla.org/en/mobile/viewport_meta_tag

Certes, un très petit cas de bord, mais mérite d'être mentionné.

Si vous utilisez un transfert de domaine via votre fournisseur DNS, votre site peut finir enveloppé dans un iframe. Godaddy, par exemple, utilisez cette technique si vous masquez votre domaine et votre transfert.

J'ai été coincé sur ce problème pendant plusieurs heures.

N'oubliez pas de placer également le contenu à l'intérieur d'un <div class="container-fluid">...</div>

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top