Vant按钮组件在iPhone14上字体和间距变形怎么办？

这是典型的rootValue配置和设计稿不匹配。Vant默认按375设计稿出样式，你用750的设计稿，postcss-pxtorem的rootValue得改成75。根节点font-size别写死16px，用lib-flexible或者amfe-flexible动态计算。

postcss配置改成这样：

// postcss.config.js

module.exports = {

  plugins: {

    'postcss-pxtorem': {

      rootValue: 75, // 750设计稿对应75

      propList: ['*'],

    }

  }

}

另外装一下amfe-flexible在入口文件引入，让它自动根据屏幕宽度算根节点font-size，这样大屏手机就不会异常放大了。

这个问题大概率是Vant的样式在不同屏幕密度下没有完全适配好，尤其是iOS设备的dpr（设备像素比）比较高，容易导致字体和间距异常。你可以从以下几个方面优化解决。

首先确认一下是不是postcss-px-to-viewport或者类似的插件配置有问题。如果用的是vite-plugin-uni做适配，确保它的unitPrecision精度设置得当，建议调成5或者更高，避免转换后的小数点精度丢失。

然后重点检查Vant的样式单位，它默认是用px的，但你用了rem方案，这可能会导致冲突。可以在ConfigProvider里强制启用vant的scale能力，代码类似这样：

import 'vant/lib/index.css';

import { ConfigProvider, Button } from 'vant';



function App() {

  return (

    <ConfigProvider themeVars={themeVars}>

      <Button type="primary">立即购买</Button>

    </ConfigProvider>

  );

}



const themeVars = {

  buttonFontSize: '16px', // 强制固定字体大小

  buttonPadding: '0 15px', // 调整内边距

};

这里的themeVars能覆盖Vant默认样式，直接把按钮的字体和间距锁定住，避免被动态计算影响。

还有一种可能是你根节点的font-size被某些逻辑动态修改了，比如有些库会根据屏幕宽度重新调整html的font-size，建议在调试工具里打印一下实时的document.documentElement.style.fontSize，看看是不是有其他地方偷偷改了。

最后一个小技巧，如果实在搞不定，可以考虑直接用媒体查询锁死iPhone14的样式，比如：

@media only screen and (device-width: 390px) and (-webkit-device-pixel-ratio: 3) {

  .van-button {

    font-size: 16px !important;

    padding: 0 15px !important;

  }

}

这样虽然不够优雅，但能快速解决问题。记得缓存起来，别让这些样式每次都重新计算。