Introduction: The project adopts uniAPP framework for development, and it has to be said that the syntax development of VUE is really more comfortable. Meanwhile, vuex plug-in can be used perfectly, which also provides a more elegant writing process for small program adaptation tablet.

Adaptation method:

1, determine whether the screen is flat size

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) {// If (screenRate > 0.65) Return ('SET_IS_TABLET', true)}} catch (e) {console.log(' get size failed ')}}, // mutations // set whether SET_IS_TABLET(state, res) { state.isTablet = res },Copy the code

Call app. vue onLaunch: this.$store.dispatch(‘getScreenSize’)

Note that the method of judging the proportion of tablets does not ensure that all tablets of non-ipad products are correctly judged. If the judgment is wrong, you can adjust the proportion by yourself

Since the store state of this project is divided by modules, isTablet variables can be exported in the index file, and then mapGetters can be used to directly obtain the value in the page:

2, the page to introduce variables to dynamically add the class name, according to the plate class name to add the plate style

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