ios - React Select 输入缩放——无法在 iPhone XS 上禁用

Question

我有以下用于 React 下拉列表的代码:

import Select from 'react-select';

const dropdownStyles = {
  control: base => ({
    ...base,
    fontSize: '1.8vh'
  }),
  menu: base => ({
    ...base,
    fontSize: '1.8vh'
  }),
}

...

<Select
  className="dropdown-select"
  styles={dropdownStyles}
  options={this.options()}
  defaultValue={this.options()[0]}
  onChange={selection =>
    this.setState({'type': selection.value})
  } />

在我的 iPhone XS 上，在 Chrome 和 Safari 中，当我按下拉菜单选择一个值时，它会放大。

根据其他 StackOverflow 答案，我尝试了多种不同的解决方案来解决这个问题。我在页面标题中添加了一个元标记以防止缩放。我已经操纵了传入的 fontSize 以确保它大于 16px。我为 .Select input 添加了 CSS 规则来更改字体大小。没有任何效果。

iPhone XS 有什么独特之处可以打破之前的解决方案吗？

Answer 1

我在这种情况下也遇到过类似的问题。如果您在react-select下拉列表中使用的字体大小<16px，那么iOS将缩放到该输入字段。这是出于可访问性的原因。

你可以使用这样的东西:

.dropdown-select__control.dropdown-select__control--is-focused {
    font-size: 16px !important;
}

它应该可以解决您的问题。