Firefox开发人员工具上的响应视图显示错误的宽度 [英] Responsive view on Firefox Developer Tools show wrong width

问题描述

我正在使用Firefox开发人员工具测试网站，但遇到了一个奇怪的错误.然后，我使用简单的控制台日志console.log($(window).width)检查了窗口宽度，发现开发人员工具中报告的宽度与javascript正在检测的宽度不同.

我尝试过使用Google DevTools，但显示宽度与控制台日志宽度一致.

这是Firefox的错误，还是我做错了什么?实际上，该网站可以在真正的移动设备上和Google DevTools上正常运行，但是如果我在Firefox上测试同一页面，则会看到实际上不存在的错误(因此，我已经浪费了一些时间). /p>

这是几个屏幕截图，可以更好地解释我的意思:

Google Chrome

Firefox

调整浏览器窗口的大小不会影响JavaScript $(window).width

解决方案

问题出在开发人员工具恕我直言的文档中.

他们没有提到有关 Touch Simulation 更改渲染行为的事情.

AFAIK，Touch Simulation激活某种形式的逻辑像素"模式，其中使用设备DPI或DPR转换长度.

停用它，然后自己查看.

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

Firefox

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

解决方案

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.

这篇关于Firefox开发人员工具上的响应视图显示错误的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！