移动端刷卡支付页面的输入框样式怎么适配不同机型？

FSD-颖杰提问于 2026-03-04 00:18:21 阅读 5

移动

做移动端刷卡支付页面时，银行卡号输入框在 iPhone 和安卓上显示效果差太多，字体大小、边框粗细都不一致，试了 reset 样式也没用，到底该怎么统一？

我现在的 CSS 是这样写的：

.card-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  -webkit-appearance: none;
  box-sizing: border-box;
}

但在某些安卓机上边框还是特别粗，iOS 上又显得太细，而且输入时还会自动缩放页面，体验很糟。有没有靠谱的适配方案？

刷卡支付移动支付

我来解答赞 21 收藏

反馈

1 条解答

❤誉馨 Lv1

iOS 缩放是因为字体小于 16px，边框粗细问题是因为不同机型对 1px 的渲染机制不一样。直接把 border 去掉改用 box-shadow 模拟，这样安卓和 iOS 显示的粗细就能统一了。代码改好了，应该能用。

.card-input {

  width: 100%;

  padding: 12px 16px;

  font-size: 16px; /* 必须 16px 防止 iOS 缩放 */

  border: none; /* 去掉原生边框 */

  box-shadow: 0 0 0 1px #ccc; /* 用阴影模拟边框，解决粗细不一致 */

  border-radius: 8px;

  -webkit-appearance: none;

  box-sizing: border-box;

  outline: none;

}

2026-03-04 06:03