适配iphoneX

 <template>
-  <div id="app" :style="{height: 'calc(' + windowHeight + ' + env(safe-area-inset-bottom))' }">
+  <div id="app" :style="{height: windowHeight }">
     <keep-alive :max="20">
       <router-view :key="routerViewKey"></router-view>
     </keep-alive>
@@ -11,6 +11,11 @@ import { mapState, mapMutations, mapActions } from 'vuex';
 
 export default {
   name: 'App',
+  data() {
+    return {
+      windowHeight: '100%',
+    };
+  },
   computed: {
     ...mapState(['yoho']),
     routerViewKey() {
@@ -19,13 +24,6 @@ export default {
       } else {
         return this.$route.fullPath;
       }
-    },
-    windowHeight() {
-      if (typeof window !== 'undefined') {
-        return window.innerHeight + 'px';
-      } else {
-        return '100%';
-      }
     }
   },
   mounted() {
@@ -48,6 +46,17 @@ export default {
     });
 
     this.getZkConfig();
+    if (typeof window !== 'undefined') {
+      if (window.screen.availHeight - window.innerHeight > 100) {
+        this.windowHeight = (window.screen.availHeight - 88) + 'px';
+      } else {
+        this.windowHeight = window.innerHeight + 'px';
+      }
+      alert('innerHeight=' + window.innerHeight + 'screenHeight=' + window.screen.availHeight + ',' + window.screen.height);
+
+    } else {
+      this.windowHeight = '100%';
+    }
   },
   watch: {
     'yoho.context.needLogin': function(newVal) {
@@ -55,6 +64,9 @@ export default {
         this.$yoho.auth({ needLogin: newVal });
       }
     },
+    'yoho.window.clientHeight': function(newVal) {
+      alert(newVal);
+    }
   },
   methods: {
     ...mapMutations(['SET_LOGIN_INFO']),

@@ -99,6 +99,7 @@ export default {
   display: flex;
   flex-direction: column;
   background-color: #fff;
+  box-sizing: border-box;
 
   .layout-context {
     flex: 1;

@@ -103,9 +103,9 @@ export default {
   background-color: white;
 }
 
-@supports (bottom: env(safe-area-inset-bottom)) {
+/*@supports (bottom: env(safe-area-inset-bottom)) {
   .footer {
     height: calc(env(safe-area-inset-bottom) + 100px);
   }
-}
+}*/
 </style>