haohao_blog

最近一段时间比较忙，一直没有更新博客…

今天说一下 在vant-ui 和 mint-ui中picker存在的问题。如果你用lib-flexible和pxtorem两个插件进行适配，在设置item-height或者不设置，在高分屏的手机，比如iphoneX，会发现每个选项都挤到一块了。效果图就不展示了，有兴趣的同学可以尝试一下。下面说一下原因:

打开浏览器，可以看到定义的item-height是在行内式加入的。使用lib-flexible会根据手机的dpr 动态缩小 <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”> initial-scale中的值。比如iphoneX的dpr 为 3 ，initial-scale会缩小为0.33333。页面的元素会根据dpr计算响应的rem值，但是picker是行内样式，不会对它进行计算。所以会导致每一个item会挤到一块。

解决方法

1. <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”> index.html 中写死这个，这样lib-flexible就不会动态根据手机的dpr改变。
2. 在utils中定义的一个公共方法。

export function getDpr() {
  // const isAndroid = window.navigator.appVersion.match(/android/gi)
  const isIPhone = window.navigator.appVersion.match(/iphone/gi)
  const devicePixelRatio = window.devicePixelRatio
  if (isIPhone) {
    // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
    if (devicePixelRatio >= 3) {
      return 3
    } else if (devicePixelRatio >= 2) {
      return 2
    } else {
      return 1
    }
  } else {
    // 其他设备下，仍旧使用1倍的方案
    return 1
  }
}

computed: {
    // 由于 mint-ui itemHeight 为内联样式, 根据设备 dpr 动态调整
    itemHeight() {
      const defaultValue = 36
      return defaultValue * getDpr()
    }
  },

以上是我想到的两种方案，有什么说的不对的地方，欢迎大家指正和交流。