前端多端适配初识

我们的项目做成了一个PWA应用，并适配了移动端和电脑端，这里我们说说我们适配的方式

这里我们主要使用了两种方法

两套资源

对于一些不方便使用css适配的页面，我们通过检测用户的登录端的类型判断应该给他渲染什么页面，这里我们说说我们判断的方式，由于我们加入了服务端渲染，服务端渲染的时候，并没有浏览器的navigator，所以这里写了两种判断方式

export function isPC (ua) {
  if (typeof navigator !== 'undefined') {
    return isClientPC()
  } else {
    return isServerPC(ua)
  }
}

export function isClientPC () {
  var flag = true
  var Agents = [
    'Android',
    'iPhone',
    'SymbianOS',
    'Windows Phone',
    'iPad',
    'iPod'
  ]

  if (typeof navigator !== 'undefined') {
    var userAgentInfo = navigator.userAgent
    for (var v = 0; v < Agents.length; v++) {
      if (userAgentInfo.includes(Agents[v])) {
        flag = false
        break
      }
    }
  }

  return flag
}

export function isServerPC (ua) {
  var flag = true
  var Agents = [
    'Android',
    'iPhone',
    'SymbianOS',
    'Windows Phone',
    'iPad',
    'iPod'
  ]
  for (var v = 0; v < Agents.length; v++) {
    if (ua.includes(Agents[v])) {
      flag = false
      break
    }
  }
  return flag
}

这样，通过调用isPC我们就可以判断用户属于手机端还是电脑端，给用户渲染相应的资源

首先我们有两个entry，这里主要说说客户端的使用

entry-client.js

import { createApp } from './main'
import { isPC } from './utils/utils'

const { app, router } = createApp()

router.isPC = isPC()

router.onReady(() => {
  app.$mount('#app')
})

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/serviceWorker.js').then(registration => {
      console.log('SW registered: ', registration)
    }).catch(registrationError => {
      console.log('SW registration failed: ', registrationError)
    })
  })
}

我们运行时就根据是server端还是client端来选择entry文件，我们client端的entry把isPC加到router中，所以我们可以在router.js中直接使用，如下，判断是否时pc端来选择对应的资源

{
    path: '/questionnaire',
    name: 'questionnaire',
    component: Questionaire,
    meta: { requiresAuth: true },
    beforeEnter: (to, from, next) => {
      if (!router.isPC) {
        next()
      } else {
        next('/questionnairePC')
      }
    }
},

css适配

css适配比较简单就是通过css的media来进行适配，写多套css

我们主要用到了3种尺寸，把对应尺寸的css写在对应的地方就行了

@media (min-width 1200px)
  ...
@media (min-width 576px) and (max-width 1200px)
  ...
@media (max-width 576px)
  ...