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&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /&gt; 这个在 index.html&lt;head&gt; 中为我唤醒了 在构建捆绑包后,您能否检查元标记是否存在。即build文件夹【参考方案2】:

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

你可以这样使用:

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

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

【讨论】:

以上是关于React Select 输入缩放 - 无法在 iPhone XS 上禁用的主要内容,如果未能解决你的问题,请参考以下文章

梯度下降在实践I -特征缩放

react 中select添加一个删除第一个

React Native iOS 标准和缩放显示

使用带有formik的react-select时无法读取未定义的属性“类型”

使用 redux-form 和 react-select.creatable 为啥模糊事件会清除输入?

自动缩放无法正确创建实例