响应网站缩小到移动设备的全宽度

我正在测试自举响应导航栏和我有一个小样网站。当我在桌面上调整浏览器的大小时，一切都很好，包括导航栏，它变成了可折叠的菜单，顶部有一个小图标，我可以点击看到更多的菜单按钮。

但是当我在移动浏览器上试用它时(我在 chrome 上试用，在 Android 上试用互联网浏览器) ，我没有看到响应式的设计。我只能看到非常小版本的桌面像网站。

有人能指出我哪里做错了吗？

74273 次浏览

小开

最佳答案

把这个添加到你的 HTML 头. 。

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

这告诉较小的设备浏览器如何缩放页面

小开

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

将是一个更好的选择，因为它使从肖像到景观和背部更愉快的用户体验与/高度将采取自然，因为可能的自动缩放。

小开

如果已接受的答案对搜索此错误的人不起作用，则添加此选项。我相信这将是一个罕见但令人沮丧的案例:

如果您的页面是在一个框架集内呈现的(例如域隐藏) ，那么放置 meta 标记将无济于事。您需要将它们放在隐藏域的页面中，根据您的 DNS 主机的不同，您可能有访问权限，也可能没有访问权限。

小开

尝试清除浏览器的缓存并在新标签页中打开该页。这有时解决了我的问题，无论什么时候发生。