title: Website looks way different on smartphones even with media query
body: <p>EDIT: I've managed to tweak a better result setting the viewport to 0.25. But i still got some awful stuff going on. The actionbar for example, its set to 100% and its taking only 70% of the screen.</p>
  
  <p>I've got a big issue here.</p>
  
  <p>Im developing a website, no big deal on it. But i gotta make it responsive for smartphones as well.</p>
  
  <p>Well, I'm using media query for this, and window resizer to use the exact width.</p>
  
  <p>Im using % values for divs as well, not for height of course, but for width.</p>
  
  <p>While I'm "emulating" on chrome, the layout works just fine, no problem at all.</p>
  
  <p>But when i go test on Galaxy S2 for example, looks really chunky. I don't know what I can do to make it the same exact way.</p>
  
  <p><a href="http://www2.madeinweb.com.br/jobs/adc/prototype/html/" rel="nofollow">http://www2.madeinweb.com.br/jobs/adc/prototype/html/</a></p>
  
  <p>This is the home im working on right now. The proper media query is this one:</p>
  
  <pre><code>@media only screen and (min-width : 320px) and (max-width : 640px) {}
  </code></pre>