小程序平板适配

前言：项目采用的是uniapp框架进行开发，不得不说vue的语法开发真的要舒服很多，同时vuex插件可以完美配合使用，这也给小程序适配平板提供了比较优雅的写法处理。

适配方法：

1、判断屏幕是否为平板尺寸

    // 获取屏幕大小,写在action中
    getScreenSize({commit}) {
        try {
            const res = uni.getSystemInfoSync()
            const { windowWidth, windowHeight, screenHeight, screenWidth } = res
            const params = {
                width: windowWidth,
                height: windowHeight
            }
        
            const screenRate = screenWidth / screenHeight
            if (screenRate > 0.65) {
                // 若比例大于0.65,判断为平板
                commit('SET_IS_TABLET', true)
            }
        } catch (e) {
            console.log('获取尺寸失败')
        }
    },
    
    // mutations
    // 设置是否平板
    SET_IS_TABLET(state, res) {
        state.isTablet = res
    },

在APP.vue文件onLaunch中调用：this.$store.dispatch('getScreenSize')

注意判断平板的比例方法不确保非ipad产品所有平板都判断正确，如果遇到判断不对自行调整比例即可

由于本项目store状态采用模块划分，将isTablet变量在index文件中导出，然后在页面中就可以用mapGetters直接获取值：

2、页面中引入变量动态添加类名，根据平板类名添加平板样式即可

    <view class="page-container" :class="{tablet: isTablet}"><view>
    
    import { mapGetters } from "vuex"
    
    // 计算属性
        computed: {
            ...mapGetters([
                'isTablet',
            ]),
       }
       
   <style lang="stylus">
       .page-container
           .header
               height 100rpx
          
          &.tablet
              .header 60rpx
   <style>