CODEWITHSUNDEEP
google-chromegoogle-chrome-devtoolsmedia-queries
Dan
Dan

Reputation: 11

Chrome Dev Tools Viewport Width Different (Resizing Window Value vs Device Toolbar Value)

So I'm having a strange Chrome viewport issue that I've not had issues with before.

First: I am using Bootstrap 5 and thus it's breakpoints - to highlight my issue with a site that I'm working on we'll examine the 992px width breakpoint. Using this 992px value as the media query where my mobile menu would be triggered I have rules set within the following:
@media (max-width: 991.98px) {...}

Looking at Chrome's Dev Tools' Device Toolbar you can see that the viewport correctly shows the mobile menu being triggered at a width of less than 992px (~991.98px)
Desktop view 992px
Mobile Menu View 991px

However when not using the Device Toolbar and just resizing the screen, which I find easier and my usual workflow when doing responsive edits, the viewport width seems to be off by 15px. Meaning my mobile menu breakpoint (in the resizing viewport width) seems to be triggered at 976px instead of 991px width - see attached photos. I've just notice this today and know it used to show the correct/same width value as when using the Device Toolbar. I'm wondering if I've changed some type of setting that I am unaware of. Note: my zoom value is default at 100% and my Chrome version is the latest official build Version 94.0.4606.54 (Official Build) (x86_64)
Resizing Window Desktop View 977px
Resizing Window Mobile Menu View 976px

Really appreciate any help. Thank you.

Upvotes: 1

Views: 1181

Answers (2)

Dan
Dan

Reputation: 11

This is fixed with the new Chrome update today 11/24/21 Version 96.0.4664.55

Upvotes: 0

Tang_8
Tang_8

Reputation: 11

i also have this issue. and i find my edge、 firefox also have this issue

https://i.sstatic.net/LOmuI.jpg

above link is i use Edge open bootstrap5 website https://getbootstrap.com/docs/5.1/examples/features/ it breakpoint is 991px, but the browser width is 976px still not change

@media (min-width: 992px)
  .row-cols-lg-3>* {
     flex: 0 0 auto;
     width: 33.3333333333%;
}

it still be influenced by that

Upvotes: 1

Related Questions