title: Responsive web-site - Only Android immediately starts to Continuous Zooming In On Load
body: <p>I have not found any similiar issues searching the issue.</p>
  
  <p>Website: <a href="http://davidbrownhydraulics.com" rel="nofollow">http://davidbrownhydraulics.com</a> (old design, not mine)</p>
  
  <p>Works fine in: iPhone 4/5/iPad/etc</p>
  
  <p>Does not work in: Android phones... Galaxy S2 and other Galaxy's. (need to actually load it on an Android phone and see how it works)</p>
  
  <p>What I get when testing this website is the responsive view that SHOULD be there shows up first, but then it very quickly just keeps expanding. Its as if the browser is deciding to zoom in forever, continuously. I have tried to pin point where it may be causing that problem, it should be snapping to the max-device-width or maybe I could just target android phones in one go somehow?</p>
  
  <p><strong>Anyone have any ideas I could try out?</strong> I have tried a lot of different META content type things, changing the break points (i have a feeling it may be off for the galaxy s2? or the android has a different pixel-scale) to no avail. </p>
  
  <p>Here are the relevant sections of coding:</p>
  
  <p>Head Meta:</p>
  
  <pre><code>&lt;meta http-equiv="Content-Type" name="viewport" content="charset=UTF-8, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /&gt;
  </code></pre>
  
  <p>Media Query:</p>
  
  <pre><code>@media screen and (max-device-width:767px) 
  </code></pre>
  
  <p>My CSS to it: (idea that it will just snap to the max device width)</p>
  
  <pre><code>html { width:100%; overflow-x:hidden; }
  body { width:100%; overflow-x:hidden; }
  #outer { width:100%; }
  #main { width:100%; }
  #header { width:100%; max-width:100%; overflow:hidden; }
  </code></pre>
  
  <p>Thanks in advance, appreciate it if anyone gives it a go to load on their Android phone and let me know their thoughts </p>