html - 当我在 iPhone 上将字体大小设置为低于 16px 时，IOS 会自动放大

Question

我正在 iPhone 上测试我的应用程序，它在 iPad 上运行良好，但在 iPhone 上，当我单击文本字段时，视图会自动放大。如果我将字体大小设置为 16 像素或更大，那么一切都会正常工作。如果我们要求字体大小低于 16 像素，就会出现问题。

我的代码：

<Form.Control
 id="search-event"
 value={query}
 color="normal"
 required
 type="text"
 placeholder={MODAL_SEARCH_BAR.PLACEHOLDER}
 onChange={handleInput}
 ref={inputRef}
 className="bg-transparent"
 />

截屏：

标签： htmlcssreactjsiphonenext.js

Answer 1

也许这有帮助......？谨慎使用，这很hacky ...

// prevent safari zooming in inputs
@media screen and (-webkit-min-device-pixel-ratio: 0) {

  input {
    font-size: [your fontsize];
  }
}