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