Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Responsive view on Firefox Developer Tools show wrong width

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

like image 259
Danny_DD Avatar asked Nov 26 '25 21:11

Danny_DD


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.

like image 166
Ate Somebits Avatar answered Nov 28 '25 15:11

Ate Somebits



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!