React Select 输入缩放 - 无法在 iPhone XS 上禁用
Posted
技术标签:
【中文标题】React Select 输入缩放 - 无法在 iPhone XS 上禁用【英文标题】：React Select input zoom -- can't disable on iPhone XS 【发布时间】：2020-10-25 04:13:29 【问题描述】：我有下面的 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 中，当我按下下拉菜单选择一个值时，它会放大。
根据 *** 的其他答案，我尝试了多种不同的解决方案来解决这个问题。我在页眉中添加了一个元标记以防止缩放。我已经操作了传入的 fontSize 以确保它大于 16px。我为.Select input 添加了一个CSS 规则来更改字体大小。没有任何效果。
iPhone XS 是否有什么独特之处打破了以前的解决方案？
【问题讨论】：
也许可以尝试来自here 的不同元标记？我的意思是你确定你有正确的元标记？ 是的，既不是 也不是带有user-scalable 设置为 0 做了任何事情。 【参考方案1】：你可以尝试使用
@media screen and (-webkit-min-device-pixel-ratio: 0)
.dropdown-select:focus, .dropdown-select .select__control input:focus
font-size: 1.8vh;
【讨论】：
您能否在您的设备上查看react-select 网站。检查那里的下拉菜单是否也在您的手机上放大？
这些例子没有问题。
我也在使用 react-select 和 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 这个在 index.html 的 <head> 中为我唤醒了
在构建捆绑包后，您能否检查元标记是否存在。即build文件夹【参考方案2】：
我在这种情况下也遇到过类似的问题。如果您在 react-select 下拉菜单中使用的字体大小小于 16px，那么 ios 将缩放到该输入字段。这是出于可访问性的原因。
你可以这样使用：
.dropdown-select__control.dropdown-select__control--is-focused
font-size: 16px !important;
它应该可以解决您的问题。
【讨论】：
以上是关于React Select 输入缩放 - 无法在 iPhone XS 上禁用的主要内容，如果未能解决你的问题，请参考以下文章
使用带有formik的react-select时无法读取未定义的属性“类型”