首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >响应式网站在移动设备上缩小到全宽

响应式网站在移动设备上缩小到全宽
EN

Stack Overflow用户
提问于 2013-10-03 18:12:58
回答 4查看 72.9K关注 0票数 143

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

但当我在手机浏览器上试用(我在chrome和Android上的互联网浏览器上试用)时,我没有看到响应式的设计。我只能看到非常小的桌面版本,比如网站。

谁能指出我做错了什么?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2013-10-03 20:05:37

将此代码添加到您的HTML head中。

代码语言:javascript
复制
<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

票数 388
EN

Stack Overflow用户

发布于 2013-12-28 02:08:14

按照这里的建议,http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

代码语言:javascript
复制
<meta name="viewport" content="initial-scale=1">

这将是一个更好的选择,因为它使得从纵向到横向再从纵向到反向的用户体验要愉快得多,因为/height可以自然地采用,因为它可能会自动缩放。

票数 18
EN

Stack Overflow用户

发布于 2018-12-01 14:40:53

为搜索此错误的人添加此内容,但接受的答案对其无效。我相信这将是一个更罕见的案例,但仍然令人沮丧:

如果您的页面是在框架集中呈现的(例如,域遮盖),那么放置meta标记将不会有任何帮助。您需要将它们放在伪装域上的页面中,根据您的DNS主机,您可能有访问权限,也可能没有访问权限。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19156510

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档