部分移动设备上getComputedStyle获取placeholder字体大小异常的问题咨询

我感觉这像是个浏览器bug，但没找到其他人遇到同样的问题。在部分移动浏览器里，getComputedStyle没法正确获取输入框placeholder的字体大小。

在我的测试案例里，placeholder的字体大小设置为11px，但有些移动浏览器中，getComputedStyle识别到的却是16px。

我已经在这些设备上做了测试：

• iPhone 16的Safari和Chrome浏览器：识别为16px
• 三星Galaxy S22的Chrome浏览器：识别为16px
• 三星Galaxy S22的Firefox浏览器：识别为11px
• Win11系统的Chrome和Firefox浏览器：识别为11px

以下是测试用的代码片段：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<style>
.form-control::placeholder {
  font-size: 11px;
}
</style>

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script>
function updatePlaceholderLength(el) {
    var styles = window.getComputedStyle(el);
    var placeholderFontSize = window.getComputedStyle(el, '::placeholder').fontSize;
    
   document.querySelector('.debug-info-js').textContent = 'placeholder font size: ' + placeholderFontSize;
}

updatePlaceholderLength(document.getElementById('whatever'));
</script>

<div class="container">
  <label class="control-label" for="whatever">Check it out</label>
  <input class="form-control" id="whatever" type="text" placeholder="Here is my placeholder.">
  <hr>
  <pre class="debug-info-js"></pre>
</div>

我就是想问问有没有人了解这个情况……这是已知的bug/限制吗？还是设计如此？有没有什么办法能获取到正确的字体大小？

我试过给font-size声明加!important，当然没用……实在不知道还能做什么了。

备注：内容来源于stack exchange，提问作者kerfuffly