Search code examples
htmlgoogle-chromegoogle-developer-tools

Chrome developer tool doesn't change the site


I have this very odd issue when using Google Chrome Developer tool where it "looks like" it just zooms out when I try to change the device.

When I minimize the browser window and manually make it smaller it works fine as shown in the picture below:

enter image description here

The css changes and everything is good.

However when I use the developer tool to change it to say a mobile device nothing really happens:

enter image description here

Why is this happening?

I am using version 86.0.420.111


Solution

  • You need to add the following to your code inside your <head> tag.

    <meta name="viewport" content="width=device-width, user-scalable=no">
    

    Without it the page would not be responsive on mobile.

    More info