title: CSS Media Queries on Bootstrap not working on iPhone
body: <p>I'm using <code>Bootstrap</code> as my responsive framework. </p>
  
  <p>I have got my own style sheet underneath the Bootstrap CSS files, with own <code>Media Queries</code> in it... but when it comes to viewing my web page on my <code>iPhone 4</code>, the <code>heading</code> and <code>tags</code> dont change to conform the way i want to on my phone.</p>
  
  <p>Here is a snippet of the way my code looks:</p>
  
  <p></p>
  
  <pre><code>&lt;link href="assets/css/bootstrap.css" rel="stylesheet"&gt;
  &lt;link href="assets/css/bootstrap-responsive.css" rel="stylesheet"&gt;
  &lt;link href="assets/css/style.css" rel="stylesheet"&gt;
  </code></pre>
  
  <p>i set the <code>Media Queries</code> as follow.....</p>
  
  <pre><code>  /* 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) { ... }
  </code></pre>
  
  <p>I've already cleared the cache on my iPhone, but it's still not working</p>