Responsive view on Firefox Developer Tools show wrong width

user_8752282 0
Viewed 795

I was testing a website with the Developer Tool of Firefox and I was facing a weird bug. Then I checked the window width with a simple console log console.log($(window).width) and I saw that the reported width in developer tools wasn't the same that javascript was detecting.

I tried than with the Google DevTools and showed width was consistent with the console log width.

Is this a Firefox bug or am I doing something wrong? Actually on a real mobile device and on Google DevTools the website works as it should, but if I test the same page on Firefox I see a bug that actually doesn't exists (and for this reason I've lost some time).

This are a couple of screenshots to better explain what I mean:

Google Chrome

enter image description here

Firefox

enter image description here

Resizing the browser window doesn't effect the JavaScript $(window).width

firefox-developer-tools google-chrome-devtools viewport firefox google-chrome
1 Answers

The problem is in the documentation for developer tools IMHO.

They don't mention a thing about the Touch Simulation changing the behavior of the rendering.

AFAIK, the Touch Simulation activates some form of "logical pixels" mode, where lengths are translated using device DPI, or perhaps DPR.

Deactivate it and see for yourself.

user_31728790
Related