twitter-bootstrap - 简单的 Bootstrap 页面在 iPhone 上没有响应

标签 twitter-bootstrap responsive-design

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

我遇到的问题是在我的 iPhone 上:它的显示效果与我的桌面上一样。

当我尝试 Bootstrap Hero 示例页面(这是我开始的页面)时,它在我的 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;
}

最佳答案

确保添加:

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

给您的<head> .

我也遇到了类似的问题,我错误地认为这只是视口(viewport)宽度的问题。

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

关于twitter-bootstrap - 简单的 Bootstrap 页面在 iPhone 上没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9386429/

相关文章:

html - IE7 响应图像故障

html - 无论 css 中的设备宽度如何,标题对齐中心

html - 使用 CSS 创建响应式子导航项

html - 两张图片,一张调整大小,一张未调整大小

html - 2列发行高度100%

html - 列中具有最小宽度的 div,Bootstrap 3.2

css - 在另一个 div 中 Bootstrap 弹出窗口

html - 强制 bootstrap 4 nav-pills 中的第一项在合理时为全宽

javascript - 如何使用 Bootstrap 将按钮居中?

html - Bootstrap 输入附加不适用于流体网格