响应式网站在手机上全长缩小

我正在testingBootstrap 3响应导航栏，我有一个演示网站。 当我调整桌面上的浏览器的大小，包括导航栏，这成为可折叠的菜单上面有一个小图标，我可以点击查看更多的菜单button的一切工作正常。

但是当我尝试从移动浏览器（我在Chrome浏览器和Chrome浏览器上试过）时，我没有看到响应式devise。 我只能看到非常小的桌面版本的网站。

任何人都可以指出我做错了什么？

Answer 1

将此添加到您的HTML头

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

这会告诉较小的设备浏览器如何缩放页面。 你可以阅读更多关于这里： https : //developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Answer 2

如这里所build议http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

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

将会是一个更好的select，因为它可以自动缩放，因为它可以从纵向到横向，并返回一个更愉快的用户体验，因为/ height会自然采用。