移动端适配

1. 通用适配

页面的 NavBar 和 设备的 statusBar 重叠

解决：给 NavBar 加 padding-top

.nav-bar {
  padding-top: 22px; // 适配沉浸式布局 statusBar 不被覆盖
}

2. IOS适配

页面滚动卡顿

解决：指定滑动原生使用 IOS 原生的滑动方式

/* reset.css */
html, body {
  -webkit-overflow-scrolling: touch;
}

点击按钮出现高亮效果

解决：取消 IOS 下默认的高亮效果

/* reset.css */
html, body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

适配刘海屏（内容紧贴）

底部安全区适配（内容紧贴）

解决：

1. 判断是否是 iPhoneX设备

// isIphoneX.js
// 在 main.js 中引用

const isIphoneX = () => {
  if (typeof window !== 'undefined' && window) {
    // 判断 window.navigator.userAgent 是否包含 iphone
    // iphoneX 及以上设备，屏幕垂直像素大于 812
    return /iphone/gi.test(window.navigator.userAgent) && window.screen.height >= 812
  }
  return false;
}

// 计算结果，赋值给 window 对象
window.isIphoneX = isIphoneX();

2. 在 Vuex 里设置

// store.js
export default new Vuex.Store({
  state: {
    isIphoneX: false
  },
  mutations: {
    setIsIphoneX: function(state, isIphoneX) {
      state.isIphoneX = isIphoneX
    }
  }
})

3. App.vue 中挂载

created() {
  this.commit('setIsIphoneX', window.isIphoneX);
}

4. 定义处理的样式

// iPhoneX 顶部危险区
.iphonex-top {
  padding-top: 44px;
}

// iPhoneX 顶部危险区
.ipthonex-bottom {
  padding-bottom: 34px;
}

5. 给相关组件动态添加样式

<div :class="[{'iphonex-top': $store.state.isIphoneX}]">

参考

• iPhone X 安全区适配
  https://webkit.org/blog/7929/designing-websites-for-iphone-x/

• uni-app 全面屏适配
  https://ask.dcloud.net.cn/article/35564