twitter-bootstrap 响应式网站在移动设备上缩小到全宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19156510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive website zoomed out to full width on mobile
提问by lawphotog
I am testing out Bootstrap responsiveness navbar and I have a demowebsite. When I resize the browser on a desktop, it all works fine including the nav bar which become collapsible menu with a small icon on the top which I can click to see more menu buttons.
我正在测试 Bootstrap 响应性导航栏，并且我有一个演示网站。当我在桌面上调整浏览器的大小时，一切正常，包括导航栏，它变成了可折叠菜单，顶部有一个小图标，我可以点击它以查看更多菜单按钮。
But when I tried it from a mobile browser (I tried it on chrome and internet browser on an Android), I didn't see the responsive design. I could only see very small version of desktop like website.
但是当我从移动浏览器尝试它时（我在 Android 上的 chrome 和互联网浏览器上尝试过），我没有看到响应式设计。我只能看到非常小的桌面版本，比如网站。
Could anyone point out what I am doing wrong?
谁能指出我做错了什么？
回答by Zim
Add this to your HTML head..
将此添加到您的 HTML 头..
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This tells smaller device browsers how to scale the page. You can read more about this here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
这会告诉较小的设备浏览器如何缩放页面。您可以在此处阅读更多相关信息：https: //developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
回答by Tom
as suggested here http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
<meta name="viewport" content="initial-scale=1">
would be an even better choice as it makes going from portrait to landscape and back a much more pleasant user experience as with/height would adopt naturally because of the possible auto-scaling.
将是一个更好的选择，因为它使从纵向到横向并返回一个更愉快的用户体验，因为由于可能的自动缩放，with/height 将自然采用。
回答by Day Davis Waterbury
Adding this for people searching this error for whom the accepted answer is not working. I believe this will be a rarer, but nonetheless frustrating case:
为那些搜索此错误但接受的答案不起作用的人添加此内容。我相信这将是一个罕见但令人沮丧的案例：
If your page is rendering inside a frameset (for example domain cloaking), then putting the meta tags won't help. You would need to put them in the page on the cloaking domain, which you may or may not have access to depending on your DNS host.
如果您的页面在框架集内呈现（例如域伪装），那么放置元标记将无济于事。您需要将它们放在伪装域的页面中，根据您的 DNS 主机，您可能有权访问，也可能无权访问。
回答by John Q.
Try clearing your browser's cache and open the page in a fresh tab. This sometimes resolves the issue for me whenever it happens.
尝试清除浏览器的缓存并在新选项卡中打开页面。这有时会在发生时为我解决问题。
