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

Question

资深开发人员

我正在使用一些控件，它是以下控件，其中一些控件比屏幕大：

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

而且，如果您仔细地看到第一个屏幕显示：406px，您是否知道为什么我不能获得适当的价值？

这是我上面显示的代码。

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

另外，您可以从以下位置访问该网站：

https://fanmixco.github.io/toastmasters-timer-material-design

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

Answer 1

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