web-dev-qa-db-fra.com

Simple Bootstrap n'est pas sensible sur l'iPhone

J'ai téléchargé Twitter Bootstrap et créant un simple projet Rails. J'ai copié le fichier css si nécessaire et il s'affiche correctement. J'ai également copié le fichier js et tout le reste fonctionne parfaitement 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" de différentes tailles, cela fonctionne très bien.

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

Lorsque j'essaie la page Bootstrap Hero Example (qui est celle avec laquelle je suis parti)), 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.

Pour votre information, le CSS que j'ai changé 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;
}
twitter-bootstrapresponsive-design
81
RaySF

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 j'ai pensé à tort que c'était juste une question de largeur de fenêtre.

Mise à jour: consultez @NicolasBADIA answer pour une version plus complète.

175
Víctor López García

Le code proposé par frntk ne fonctionne pas lorsque vous allumez l'appareil en mode paysage et la solution proposée par virtualeyes est incorrecte car elle utilise un point-virgule au lieu de virgule. Voici le bon code:

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

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

107
Nicolas BADIA

Certes, une très petite affaire Edge, mais mérite d'être mentionnée.

Si vous utilisez la redirection de domaine via votre fournisseur DNS, votre site peut alors être encapsulé dans un iframe. GoDaddy, par exemple, utilise cette technique si vous masquez votre domaine et effectuez un transfert.

6
nullable

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

N'oubliez pas de placer également le contenu dans un <div class="container-fluid">...</div>

2
unicornherder