Site Web réactif zoomé sur toute la largeur du mobile
Je teste la barre de navigation Bootstrap responsiveness et j’ai un site Web demo . Lorsque je redimensionne le navigateur sur un bureau, tout fonctionne correctement, y compris la barre de navigation qui devient un menu compressible avec une petite icône en haut sur laquelle je peux cliquer pour voir plus de boutons de menu.
Mais lorsque je l'ai essayé à partir d'un navigateur mobile (sur Chrome et sur Internet sous Android), je n'ai pas vu le design responsive. Je ne pouvais voir qu'une très petite version d'un ordinateur de bureau tel qu'un site Web.
Quelqu'un pourrait-il indiquer ce que je fais mal?
Ajoutez ceci à votre tête HTML.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Cela indique aux petits navigateurs comment redimensionner la page. Vous pouvez en savoir plus à ce sujet ici: https://developer.Apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
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 permet de passer de portrait en paysage et en arrière une expérience utilisateur beaucoup plus agréable comme avec/height adopterait naturellement en raison de la possibilité de mise à l'échelle automatique.
Ajoutant 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 s'affiche dans un jeu de cadres (par exemple, le masquage de domaine), la mise en place des balises méta ne vous aidera pas. Vous devez les placer dans la page du domaine cloaking, à laquelle vous pouvez ou non accéder en fonction de votre hôte DNS.