Site Web réactif agrandi en pleine largeur sur mobile

139

Je teste la réactivité de Bootstrap navbar et j'ai un site Web de démonstration . Lorsque je redimensionne le navigateur sur un bureau, tout fonctionne bien, y compris la barre de navigation qui devient un menu pliable avec une petite icône en haut sur laquelle je peux cliquer pour voir plus de boutons de menu.

Mais quand je l'ai essayé à partir d'un navigateur mobile (je l'ai essayé sur Chrome et un navigateur Internet sur un Android), je n'ai pas vu le design réactif. Je ne pouvais voir qu'une très petite version de bureau comme un site Web.

Quelqu'un pourrait-il indiquer ce que je fais mal?

— Lawphotog
source

378

Ajoutez ceci à votre tête HTML.

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

Cela indique aux navigateurs d'appareils plus petits comment mettre à l'échelle la page. Vous pouvez en savoir plus à ce sujet ici: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

— Zim
source

1

J'ai ajouté ce code dans la section head mais cela ne fonctionne pas pour mon explorateur Internet par défaut d'Android, vous pouvez vérifier - www.freerechargeapp.com/index.html

— santosh

Je ne comprends vraiment pas pourquoi pour moi ne fonctionne pas. Dans un site Web fonctionnent et dans un autre site Web ne fonctionne pas. Et la structure du code est la même avec le bootstrap frais

— bheatcoker

1

@Skelly - D'autres réponses que j'ai vues laissées de côté maximum-scaleet utilisées à la 1.0place 1. Savez-vous si ces choses font une différence?

— onebree

1

Vous m'avez sauvé :) Merci.

— Fatih

1

Merci deux ans plus tard, votre message est toujours le shiznizzle (sic.) 😎

— Walt

17

comme suggéré ici http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

<meta name="viewport" content="initial-scale=1">

serait un choix encore meilleur car cela rend le passage du portrait au paysage et du dos une expérience utilisateur beaucoup plus agréable, car avec / height l'adopterait naturellement en raison de la possible mise à l'échelle automatique.

— À M
source

Merci, cela a résolu le problème de mise à l'échelle sur iPhone et affiche le portrait et le paysage différemment (et correctement).

— SexxLuthor

0

Ajout de ceci pour les personnes recherchant cette erreur pour lesquelles la réponse acceptée ne fonctionne pas. Je pense que ce sera un cas plus rare, mais néanmoins frustrant:

Si votre page est rendue dans un jeu de cadres (par exemple, le masquage de domaine), le fait de placer les balises meta n'aidera pas. Vous devrez les mettre dans la page du domaine de cloaking, auquel vous pouvez ou non avoir accès en fonction de votre hôte DNS.

— Jour Davis Waterbury
source

0

Essayez de vider le cache de votre navigateur et ouvrez la page dans un nouvel onglet. Cela résout parfois le problème pour moi chaque fois que cela se produit.

— John Q.
source