title: Responsiveness : Chrome inspector tool VS actual browser window
body: <p>I've made a responsive web page that looks really great when resizing the window manually but doesn't look so great when using the responsive tool embedded in chrome. So I decided to design according to what it looks like on Google Chrome responsive tool, but now it looks awful when I resize the window manually.</p>
  <p>Which one should I trust ?! How do I know what It will look like on mobile?</p>
  <p>Edit: Also, I have this basic rule</p>
  <pre><code>@media only screen and (min-device-width: 900px) {
  
     body {
        width: 60%;
        margin: 0 auto;
     }
  
  }
  </code></pre>
  <p>The body width will correctly resize while using chrome responsive tool, but will not when resizing chrome window. If I change it for <code>min-width : 900px</code>, the body will correctly resize while resizing chrome window but not with chrome responsive tool!</p>
  <p>On the left this is the responsive inspector tool provided by Chrome, on the right this is the chrome windows being resized ( both are the same width ) while using <code>@media only screen and (min-device-width: 900px) </code>
  The media query doesn't work here ( on the inspector ) but does work while resizing the windows</p>
  <p><a href="https://i.stack.imgur.com/uhwe2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uhwe2.png" alt="enter image description here" /></a></p>
  <p>Same thing here but using <code>@media only screen and (min-width: 900px) </code>. The inspector tool displays the page Ok, but whenever I resize the Chrome window the query doesn't get triggered!</p>
  <p><a href="https://i.stack.imgur.com/RUwC1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RUwC1.png" alt="enter image description here" /></a></p>