Responsiveness : Chrome inspector tool VS actual browser window

Question

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.

Which one should I trust ?! How do I know what It will look like on mobile?

Edit: Also, I have this basic rule

@media only screen and (min-device-width: 900px) {

   body {
      width: 60%;
      margin: 0 auto;
   }

}

The body width will correctly resize while using chrome responsive tool, but will not when resizing chrome window. If I change it for min-width : 900px, the body will correctly resize while resizing chrome window but not with chrome responsive tool!

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 @media only screen and (min-device-width: 900px) The media query doesn't work here ( on the inspector ) but does work while resizing the windows

Same thing here but using @media only screen and (min-width: 900px) . The inspector tool displays the page Ok, but whenever I resize the Chrome window the query doesn't get triggered!

Answer 1

I know I am late to answer but hopefully this can help others having a similar problem. I am mainly going to respond to your first bit:

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. Which one should I trust ?! How do I know what It will look like on mobile?

Like Relisora said, definitely trust the responsive tool over the manual window resize!

But it's still frustrating that manual resize is different than the developer tools.

To make sure the page looks the same/ similar on both the responsive tool and manual resizing, try using the viewport meta tag!

put something like this in your html head:

<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">

further explanation from Mozilla

Answer 2

I accord a lot of importance to the chrome responsive tool in the development tools.

However sometimes neither of resizing or the responsive tool are working (while using it on responsive settings).

The only tool that never failed me is when you emulate the device into your responsive tool :

Access it by : F12 -> Settings -> Devices

The list is quite complete but it's not a general case where you can test everything. It still should be enough for the majority of devices.

Edit :

If the device you want to test is not in the list, you can add it by clicking "Add custom device" and make sure you complete all the elements :

EDIT2 :

The inspector is working while simply resizing is not because there is a variable you don't take into account while using simple resizing : the resolution. This variable is known by the inspector when you select a device and this is why the rendering will be the exact same as if you used an actual device. The inspector will display what will be rendered on mobile.