html - Bootstrap 上的 CSS 媒体查询不适用于 iPhone

Question

我正在使用 Bootstrap作为我的响应式框架。

我在 Bootstrap CSS 文件下有自己的样式表，带有自己的 Media Queries在其中...但是当涉及到在我的 iPhone 4 上查看我的网页时, heading和 tags不要更改以符合我想要在手机上使用的方式。

这是我的代码的一个片段:

<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">

我设置了Media Queries如下......

  /* Large desktop */
  @media (min-width: 1200px) { ... }

  /* Portrait tablet to landscape and desktop */
  @media (min-width: 768px) and (max-width: 979px) { ... }

  /* Landscape phone to portrait tablet */
  @media (max-width: 767px) { ... }

  /* Landscape phones and down */
  @media (max-width: 480px) { ... }

我已经清除了 iPhone 上的缓存，但它仍然无法正常工作

Answer 1

你可能错过了标签

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

在导入之前。

请参阅文档并确保您遵循了所有步骤:

http://twitter.github.com/bootstrap/scaffolding.html