移动设备上的输入type =“ number”根据max =“ x”属性缩小

Question

我用布尔玛定义了这样的输入：

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">
      <span>Quantity</span>
      <sup class="has-text-danger">*</sup>
    </label>
  </div>  
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input" max="4" min="1" placeholder="Enter the quantity" required type="number"/>
      </div>
    </div>
  </div>
</div>

在桌面上看起来应该是这样；即它被展开并填充宽度：

On desktop

但是在移动设备上，它缩小了很多。我想说的太多了。尽管有足够的空间来填充宽度。

On mobile

似乎max="x"属性与此有关。因为当我删除max="x"时，它看起来又像在桌面上一样。 如何在不删除max="x"的情况下使其填充可用宽度？