自适应网站在移动设备上缩小到全屏

我正在测试Bootstrap响应性导航栏，并且有一个演示网站。当我在桌面上调整浏览器的大小时，所有功能都可以正常使用，包括导航栏（可变为可折叠菜单），顶部带有一个小图标，单击该图标可以查看更多菜单按钮。

但是，当我通过移动浏览器进行尝试（我在chrome和Internet浏览器上进行了尝试）时，却没有看到响应式设计。我只能看到非常小的桌面版网站。

谁能指出我做错了什么？

将此添加到您的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

如此处建议的http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

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

它将是一个更好的选择，因为它可以实现从纵向到横向再回到更舒适的用户体验，因为由于可能的自动缩放，自然而然地使用高度/高度。

为搜索此错误且接受的答案不起作用的用户添加此代码。我相信这将是一种罕见但令人沮丧的案例：

如果您的页面在框架集中进行渲染（例如，域隐藏），则放置meta标签将无济于事。您需要将它们放在隐藏域的页面中，根据您的DNS主机，您是否可以访问该页面。

尝试清除浏览器的缓存，然后在新标签页中打开页面。有时，这可以随时为我解决问题。