iPhone上的简单Bootstrap页面无响应

84

我下载了Twitter Bootstrap示例，并使用它创建了一个简单的Rails项目。我在需要的地方复制了CSS，它显示正常。我还复制了js，一切在我的桌面上都运行良好：当我更改浏览器的大小时，它将重新组织页面。当使用大小不同的“响应式设计测试工具”时，它的效果很好。

我的问题出在我的iPhone上：它像在我的桌面上一样显示Juste。

当我尝试Bootstrap Hero Example页面（这是我开始的页面）时，它在我的iPhone上运行良好。

可能出什么问题了？我几乎没有接触过任何CSS，只是在页脚上添加了填充。

仅供参考，我更改的CSS是将我的应用程序链接到application.css以下内容：

/* Application stylesheet */

@import url(bootstrap.css);
@import url(bootstrap-responsive.css);

/* Body */
body {
    padding-top: 60px;
    padding-bottom: 40px;   
}   

/* Footer */
footer {
    padding: 20px 0;
}

twitter-bootstrap responsive-design

— 瑞富
source

您可以发布测试页或一些代码吗？

— 安德列斯·伊利希

它对我很敏感。您为什么认为它没有响应？

— 杰西·沃尔加莫特

@RaySF我看不出为什么它不起作用的原因，尽管我确实对@import您使用的规则有一些疑虑，但这是个人的。您可以发布测试用例吗？

— 安德烈斯·伊里奇

@JesseWolgamott，它在我的iPhone上没有响应，当我打开上面提到的两个页面时，官方示例运行良好（例如，菜单显示的外观不同），但是页面的显示就像在桌面上一样。

— RaySF 2012年

1

@RaySF由于我的工作性质，我不得不研究各种方法来提高兼容性，并提高使用@import表示法堆叠的超大样式表的性能。在此过程中，我发现由于该技术而出现了许多问题，并发现存在biiig性能问题（还有很多无法解释的错误），后来通过使用html<link>标签附加样式表来解决。这后来被支持的问题诸如疑惑这个在这里SO。

— 安德烈斯·伊利希

184

确保添加：

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

给你<head>。

我有一个类似的问题，我错误地认为这只是视口宽度的问题。

更新：查看@NicolasBADIA答案以获得更完整的版本。

— VíctorLópezGarcía
source

8

这样，纵向和横向视图都可以正常工作：<meta name =“ viewport” content =“ width = device-width; initial-scale = 1.0; maximum-scale = 1.0; user-scaleable = 0;” />

— virtualeyes 2012年

@virtualeyes，谢谢你的提示！任何想法如何允许用户缩放并获得正确的lanscape视图？

— Andrei

不，我使用的是JQuery mobile，而不是响应式设计的忠实拥护者。让移动设备成为移动设备，平板电脑及更高版本成为台式机。介于两者之间，不在乎;-)

— virtualeyes 2012年

111

当您以横向视图旋转设备时，frntk提出的代码不起作用，并且virtualeyes提供的解决方案是不正确的，因为它使用分号而不是逗号。这是正确的代码：

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

资料来源：https : //developer.mozilla.org/en/Mobile/Viewport_meta_tag

— 尼古拉斯·巴迪亚（Nicolas BADIA）
source

4

Twitter Bootstrap官方网站中的示例应更新为使用此示例。

— 温伯特2012年

1

很好的通知，谢谢！曾经有过类似的屏幕旋转问题，但现在却像魅惑一样。

— Mark Vital 2012年

8

这应该是公认的答案！

— Sheharyar

6

当然，这是一个很小的案例，但值得一提。

如果您通过DNS提供商使用域转发，则您的网站可能最终会被包裹在iframe中。例如，如果要屏蔽域并转发，GoDaddy将使用此技术。

— 可为空
source

2

我花了数小时试图解决这个问题，最终遇到了这个评论。谢谢！

— Ed Shee

此评论将使一小群人非常非常高兴。

— Nicolas Rojo

我看不到iframe缠绕在一起，但是使用正确的meta标签存在问题，它们是否可以隐藏iframe？

— helle

3

我在这个问题上停留了几个小时。

别忘了也将内容放置在 <div class="container-fluid">...</div>

— ger
source

这container-fluid为我做了把戏！

— Paula