如何在vite.config.ts中判断当前是移动端还是pc端?

作者站长头像
站长
· 阅读数 20

使用了vite，如何在vite.config.ts中想区分移动或者PC，使用postcss-px-to-viewport来动态计算VW的值，据我了解目前只支持单独设置一个viewportWidth 比如是1920，再想设置一个移动端的 比如是720 就无法实现准确的VW计算。但是在使用如下方案的时候，navigator无法获取。

const screenWidth = /Android|webOS|iPhone|iPad|BlackBerry|iPad/i.test(navigator ? navigator.userAgent: '') ? 750 : 1920

 css: {
      postcss: {
        plugins: [
          tailwindcss,
          autoprefixer,
          pxToVW({
            unitToConvert: 'px', // 要转化的单位
            viewportWidth: screenWidth, // UI设计稿的宽度
            unitPrecision: 6, // 转换后的精度，即小数点位数
            propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
回复
1个回答
avatar
test
2024-07-20

你找错方向了。不管是 vite 还是 webpack 在打包编译的时候是没办法影响到实际客户端浏览的。打个比方就是脚手架在打包时是没办法预知未来打开项目的客户端是桌面设备还是移动端设备。

也就是说，你在 run build 打包的时候，其实是没有 navigator 的。你要判断，也是要在 main.js 里面项目初始化时去获取。并不是在编译时去处理。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容