title: iPhone is ignoring CSS media queries. Viewport tag present. Working in desktop
body: <p>EDIT: This was a total rookie error on my part. I was editing a different fileset to the one I was testing. Sincere apologies to all who answered to help me out. I've upvoted all answers as I at least learned a little more on media queries from you all, but none provided the answer. Advice pls on what now to do with this ticket?</p>
  
  <hr>
  
  <p>This is a busy topic on the site, but I haven't seen the solution for this problem.</p>
  
  <p>The <code>viewport</code> tag is present. I'm using:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
  </code></pre>
  
  <p>When I resize the browser window in Chrome, it works fine, and I can see it snapping to new breakpoints as they are reached, however iPhone Safari displays the top left of the site only, with no sign of picking up any queries.</p>
  
  <p>The CSS Media query I'm using for iPhone portrait is:</p>
  
  <pre><code>@media (max-width: 321px) { }
  </code></pre>
  
  <p>I'm using Bootstrap and LESS, so my media queries are at the end of the styles.</p>
  
  <p>Sorry I'm not in a position to share code on this. It's an odd one — I'm hoping someone can see if there's something I may be missing.</p>
  
  <p>EDIT</p>
  
  <p>Here's a very basic example which is working on my iPhone. I can rotate from portrait to landscape and the bg color will change - so there's nothing wrong with the media query I'm using:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
      &lt;style type="text/css"&gt;
  
          body
          {
              background: blue;
          }
  
          @media (max-width: 321px)
          {
              body
              {
                  background: red;
              }
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      Here is my content...
  &lt;/body&gt;
  </code></pre>
  
  <p></p>