How to keep viewport size and window size identical?

Is there a way to do that? I found it confusing when coding.
I have two windows here, the 1st one is the template I downloaded online. The 2nd one is my own duplicate.

The problem I am facing is the 1st one’s viewport width is identical with its windows width, while the second one is not.

How do I set the second one so that the windows size = viewport size?


Have you included the meta tag : <meta name="viewport" content="width=device-width, initial-scale=1.0">?

yeah I did. :thinking:

That window size you see
is the dimension of your browser window. If you drag your browser window and resize it, you’ll see that window size will change.

Window size and viewport size is different.

Window sizes puts into consideration of scrollbar etc. Your Browser is the window.

The viewport is the visible area.

I’ve set my webpage to min-width: 400px;.
Now this is as narrow as it gets…

I have those 2 chrome window side by side, the 1st one’s viewport width is 400px and its window width is 400px as well.
The second one’s viewport width is 267, and its window size is 400.

As you can see from the pic 1, those 2 windows look identical… why?
Can I change my window 2 from viewport size 267 to viewport size 400?

Is one of the window opened with the console window?

I don’t see how 2 identical window open would have two different numbers.

nope. I’m sorry if this become redundant, but the viewport size is diff , while window size is the same…

Nvm I think this does not matter…

But if anyone has a explanation regarding viewport size and windows size, do leave a comment here.

see right side space .<meta name="viewport" content="width=device-width, initial-scale=1">.this tag is also used by me.anyone know the probltem .plz suggest me someything