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答案。 我在页面标题中添加了一个元标记以防止缩放。 我已经操作了传入的字体大小以确保它大于 16px。 我为.Select input添加了一个 CSS 规则来更改字体大小。 什么都没用。

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

Answer 1

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

你可以使用这样的东西：

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

它应该解决您的问题。

Answer 2

试试这个

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>

Answer 3

你能尝试使用

@media screen and (-webkit-min-device-pixel-ratio: 0) {
.dropdown-select:focus, .dropdown-select .select__control input:focus {
font-size: 1.8vh;
}
}