title: Safari ignoring css max-width media queries below a certain point
body: <p>I'm working on optimizing a responsive site and Safari (both desktop and mobile) seems to be completely ignoring media queries below a certain point.  I have code like the following:</p>
  
  <pre><code>@media screen and (max-width: 767px){
      /* Safari responds to css here */
  }
  @media screen and (max-width: 640px){
      /* css here is ignored by Safari */
  }
  </code></pre>
  
  <p>Firefox and Chrome both respond appropriately.  Does anyone have any ideas about what is going on?</p>
  
  <p>You can see the site here: <a href="http://kgillingham.webfactional.com">http://kgillingham.webfactional.com</a>.  What should happen (and works on FF and Chrome) is that as the site becomes less than 640px the header font in the slider should become a smaller size.</p>
  
  <p><strong>edit</strong>: The site has now been updated to use javascript to add a class when the size is less than 640px.  That class always uses the smaller font size.  This means that it works as expected now, but I would much rather use CSS media queries than javascript so I would still like to see a solution.</p>