Twitter bootstrap 响应迅速的网站在手机上缩小到全宽
我正在测试引导程序的响应性navbar,我有一个网站。当我在桌面上调整浏览器的大小时,一切正常,包括导航栏,它变成了可折叠菜单,顶部有一个小图标,我可以单击它查看更多菜单按钮 但当我在手机浏览器上试用时(我在chrome浏览器上试用,在Android浏览器上试用),我没有看到响应性强的设计。我只能看到非常小版本的桌面式网站Twitter bootstrap 响应迅速的网站在手机上缩小到全宽,twitter-bootstrap,user-interface,twitter-bootstrap-3,responsive-design,bootstrap-4,Twitter Bootstrap,User Interface,Twitter Bootstrap 3,Responsive Design,Bootstrap 4,我正在测试引导程序的响应性navbar,我有一个网站。当我在桌面上调整浏览器的大小时,一切正常,包括导航栏,它变成了可折叠菜单,顶部有一个小图标,我可以单击它查看更多菜单按钮 但当我在手机浏览器上试用时(我在chrome浏览器上试用,在Android浏览器上试用),我没有看到响应性强的设计。我只能看到非常小版本的桌面式网站 有人能指出我做错了什么吗 将此添加到HTML头部 <meta name="viewport" content="width=device-width, initial-
有人能指出我做错了什么吗 将此添加到HTML头部
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
这告诉较小的设备浏览器如何缩放页面。您可以在此处阅读更多信息:如此处所示
这将是一个更好的选择,因为它使从纵向到横向再到反向的用户体验更为愉快,因为可能会自动缩放,因此使用/height时会自然而然地采用这种方式。为搜索此错误的人添加此选项,因为他们接受的答案不起作用。我相信这将是一个罕见但令人沮丧的案例:
如果您的页面是在框架集中呈现的(例如域掩蔽),那么放置元标记将没有帮助。您需要将它们放在隐藏域的页面中,根据您的DNS主机,您可能有权或无权访问该域。尝试清除浏览器的缓存,并在新选项卡中打开该页面。这有时可以解决我遇到的问题。我在标题部分添加了这段代码,但它不适用于我默认的android internet explorer,你可以检查一下-www.freerecceryapp.com/index.htmlI真的不明白为什么不适用于我。在一个网站做工作,在另一个网站不。代码结构与fresh相似bootstrap@Skelly-我看到的其他答案遗漏了
最大刻度
,并使用1.0
而不是1
。你知道这些东西会有什么不同吗?谢谢,这解决了iPhone上的缩放问题,并以不同的方式(正确地)显示纵向和横向。
<meta name="viewport" content="initial-scale=1">