javascript判断是否为移动端

使用is-mobile依赖🚀

• 前端开发中经常会遇到根据不同屏幕尺寸或不同设备动态去切换一些东西。记录一下。

1. 先安装is-mobile 包

$ npm install is-mobile -D
$ yarn add is-mobile -D
// 安装完成查看依赖
"dependencies": {
   "is-mobile": "^2.2.1",
}

2. 在页面需要使用的地方引入即可，可以在router文件中通过路由守卫判断跳转PC页面还是h5页面

import mobile from 'is-mobile'
const route = [
  {
    path: '/account',
    name: 'account',
    component: Layout,
    redirect: '/account/web/personal/personal-info'
  },
  {
    path: '/account/web/personal/personal-info',
    name: 'personalAccount',
    component: () => import('@/views/account/web/personal/PersonalInfo'),
    meta: {
      accountInfo: true
    }
  }]
  route.beforeEnter: (to, from, next) => {
      if (store.state.account.tenantType === 'PERSON') {
        mobile() ? next({ name: 'mobileAccount' }) : next()
      } else {
        mobile()
          ? next({ name: 'mobileAccount' })
          : next({ name: 'companyCompanyAccount' })
      }
    }

正则方法判断🚀

• 通过使用正则校验，判断当前设备是否是移动端。

//  判断是否为移动端
export function hasMobile () {
    let isMobile = false;
    if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        // console.log('移动端');
        isMobile = true;
    }
    if (document.body.clientWidth < 800) {
        isMobile = true;
    }
    return isMobile
}

• 在vuex 中使用 但不建议，杀鸡用不着杀牛刀😄

// 在vuex中使用
import { hasMobile } from '@/utils';
export default {
    state: {
        hasMobile: hasMobile(),
    },
    mutations: {
        setMobile (state, hasMobile) {
            state.hasMobile = hasMobile
        },
    },
}

• 在组件中使用 🚀🚀🚀

import { hasMobile } from '@/utils'

mounted () {
      // 浏览器的窗口发生改变时，才会触发resize函数）🚀
     window.addEventListener('resize', debounce(() => {
         this.$store.commit('setMobile', hasMobile());
     }));
 }

css媒体查询方法🚀

• 媒体查询语法：

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

---

/* 如果文档宽度小于 300 像素则修改背景颜色(background-color): */
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}