JS中如何获取元素的实际宽度？

Question

各位开发者，

我有一个带有一些控件的控件，它是以下控件，其中一些控件比屏幕大：

但是，如果我用 JS 或 jQuery 获得宽度，我得到的值总是相同的 300px。

如果你仔细看第一个屏幕说：406px，你知道为什么我不能得到正确的值吗？

这是我上面显示的代码。

$($('.mdl-textfield__input')[0]).outerWidth()
$($('.mdl-textfield__input')[0]).width()

另外，您可以从这里访问该网站：

重要细节，这是 Chrome 中的 iPhoneX 视图。

Answer 1

在我看来你正在使用 CSS 转换。试试
$(".mdl-textfield__input")[0].getBoundingClientRect().width

How to get the real width of an element in JS?