title: Chrome emulator and iphone 5 showing wrong media query styles, however working on window resize
body: <p>When i resize the window in chrome, it looks exactly how I want it to and breaks at the correct widths. But when i emulate the screen to an iphone (or any phone) or view it on my iphone, it's displaying the styles for the wrong breakpoints and showing extra background space. I'm suspecting it's because of the devicePixelRatio of phones; iphone is 320px but since its pixel ratio is 2, it's displaying the breakpoint for 320px at 640px width.</p>
  
  <p>I tried moving the breakpoint max-width to higher than 640px, but it's still not working. I did write the viewport declaration.</p>
  
  <pre><code>    &lt;meta name=”viewport” content=”width=device-width, initial-scale=1"&gt;
  </code></pre>
  
  <p>My div wrapper widths are set to a percentage of the screen, not pixels. And also I tried to set the background-size of the background images to cover without any luck.</p>
  
  <p>This is how it looks on iphone:
  <a href="http://i28.photobucket.com/albums/c221/irlinroman/iphone-640_zpsd656a8ff.png" rel="nofollow">http://i28.photobucket.com/albums/c221/irlinroman/iphone-640_zpsd656a8ff.png</a></p>
  
  <p>And this is on desktop browser at window resized to 640px width:
  <a href="http://i28.photobucket.com/albums/c221/irlinroman/window-resize-640_zps1728eb01.png" rel="nofollow">http://i28.photobucket.com/albums/c221/irlinroman/window-resize-640_zps1728eb01.png</a></p>
  
  <p>Here's my media query css code:</p>
  
  <pre><code>    @media screen and (max-width: 960px), screen and (max-device-width: 960px) {
      #links {
      float: none;
      margin-left: 40px;
      margin-top: 10px;
  }
  #content-2 p.bio {
      float: none;
      margin-bottom: 60px;
      font-size: 0.875em; /*should be 14px, 14 / 16 */
      line-height: 24px;
  }
  #background-2 {
      height: 420px;
  }
  #welcome-message, #welcome-message-bg {
      width: 450px;
      height: 280px;
      padding: 40px 20px;
      left: 50%;
      margin-left: -250px;
  }
  #welcome-message p.welcome {
      font-size: 2em;
  }
  #welcome-message p.about {
      font-size: 1.5em;
      width: 380px;
      line-height: 40px;
  }
  #footer .copyright {
      margin-right: 20px;
  
  }
  
  nav ul#regular-nav {
      visibility: hidden;
  }
  
  nav ul#responsive-nav {
      visibility: visible;
  }
  
  nav #responsive-li-items {
      visibility: hidden;
  }
      }
  
      @media screen and (max-width: 560px), screen and (max-device-width: 560px) {
  #welcome-message, #welcome-message-bg {
      width: 240px;
      height: 240px;
      padding: 20px 10px;
      left: 50%;
      margin-left: -130px;
  }
  
  #welcome-message p.welcome {
      font-size: 1.3em;
  }
  #welcome-message p.about {
      font-size: 1em;
      width: 200px;
      line-height: 30px;
  }
  
  header {
      height: 140px;
  }
  
  nav ul#responsive-nav {
      top: 50px;
      left: 50%;
      margin-left: -100px;
  }
  
  #background-image {
  height: 470px;
  }
  
  #irlin-design-logo {
  /*margin-left: 20px;*/
  float: none;
  display: block;
  margin-left: auto;
  margin-right: auto; 
  }
  
  #content-2 p.bio {
      width: 240px;
      margin-left: 10px;
      display: inline-block;
      margin-top: 0px;
      /*margin-bottom: 0px;*/
  
  }
  
  #content-2 h1 {
      margin-left: 10px;
      display: inline-block;
      margin-top: 0px;
      /*margin-bottom: 0px;*/
  
  }
  
  #about-me-title {
      text-align: center;
  }
  
  #bio-div {
      text-align: center;
  }
  
  #background-2 {
      height: 480px;
  }
  
  
  #links {
      float: none;
      margin-left: 10px;
  
  }
  
  #links p.side-links {   
      width: 230px;
      margin: 0 auto;
  }
  
  #footer-nav-links {
      margin: 0px;
  }
  
  #footer-nav-links a  {
      margin-right: 20px;
  }
  }
  </code></pre>
  
  <p>Thanks in advance for all suggestions.</p>