简单的 Bootstrap 页面在 iPhone 上没有响应 [英] Simple Bootstrap page is not responsive on the iPhone

问题描述

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

I downloaded Twitter Bootstrap example and create a simple rails project with it. I copied the css where needed and it displays fine. I also copied the js and everything works great on my desktop: it reorganizes the page when I change the size of my browser. When using some "responsive design testing tools" with different sizes, it works great.

我的问题是在我的 iPhone 上:它像在我的桌面上一样显示.

The problem I have is on my iPhone: it displays juste like on my desktop.

当我尝试 Bootstrap Hero 示例页面(这是我开始的页面)时，它在我的 iPhone 上运行良好.

When I try the Bootstrap Hero Example page (which is the one I started from), it works great on my iPhone.

会出什么问题?我几乎没有接触过任何 CSS，我只是在页脚上添加了一个填充.

What could go wrong? I have pretty much not touched to any CSS, I just added a padding on the footer.

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

FYI, the CSS I changed is that I am linking my app to application.css with the following content:

/* 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">

到你的.

我遇到了类似的问题，我错误地认为这只是视口宽度的问题.

I had a similar problem and I mistakenly thought it was just a matter of viewport width.

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

Update: check out @NicolasBADIA answer for a more complete version.

这篇关于简单的 Bootstrap 页面在 iPhone 上没有响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！