javascript - 电子邮件输入在 Safari 中显示不正确

问题描述

我正在 NextJS 中开发一个应用程序。我有一个带有占位符 example@example.com 的电子邮件输入字段。它在 Chrome 中正确显示，但在 Safari 浏览器中发生了这种奇怪的事情。我从来没有遇到过这个问题，知道可能是什么原因造成的吗？下面你可以看到我的 HTML (JSX) 代码和 CSS，以及一些截图。

<form>
   <input value={email} onChange={handleChange} placeholder="example@example.com" className="email-input"  type="email"></input>
</form>

.email-input {
    width: 80vw;
    height: 4.5vh;
    outline: none;
    border: 3px solid #8F8D89;
    border-radius: 5px;
    margin-bottom: 2vh;
    background-color: #EAE8DC;
    padding-left: 1vw;
    padding-right: 1vw;
}
  
.email-input:focus {
    border: 3px solid #E88074;
}
  
.email-input::placeholder {
    font-family: light-font;
    font-size: 3vh;
    color: #8F8D89;
    text-align: center;
}

标签： javascripthtmlcssreactjsnext.js

摘要： Safari 不响应占位符文本字体大小的动态变化。

请注意，问题中的占位符文本样式在此处定义：

.email-input::placeholder {
    font-family: light-font; /* <- should add `sans-serif` here */
    font-size: 3vh;
}

字体大小设置为视口高度的 3%。

我在 Safari Technology Preview (Release 120) 中对此进行了测试，它确实在页面加载时以适当的大小显示占位符文本：

但是，当我减小窗口的高度时，占位符文本保持其大小：

页面重新加载后占位符文本正确调整大小：

结论：Safari 在页面加载时正确设置占位符字体大小，但它不响应动态更改视口高度。

响应式文本的 CSS 样式建议

使用font-size: 3vh将大小设置为视口高度的百分比，这有一个问题：您最终可能会得到非常小的、不可读的文本：

为了防止出现小文本，您可以使用以下替代方法：

.email-input {
  font-size: calc(1em + 2vh);
}

这将确保显示的文本永远不会小于字体的最小尺寸：

javascript - 电子邮件输入在 Safari 中显示不正确

问题描述

解决方案

响应式文本的 CSS 样式建议

推荐阅读