Vue —— 移动端适配

最新推荐文章于 2025-11-15 06:41:34 发布

原创最新推荐文章于 2025-11-15 06:41:34 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何在已有的Vuetify PC端项目中添加移动端适配，利用Vuetify的自适应特性实现跨平台显示。主要展示了针对登录页面的移动端重构，包括检查设备类型跳转移动端登录页面及移动端页面的字体大小动态调整。同时，移动端登录页面的样式设计也进行了详细说明。

部署运行你感兴趣的模型镜像

目前的vue项目使用的vuetify框架，前期只做了PC端界面，后期在PC端项目代码中加入移动端代码处理，顺便说一下，vuetify框架可以自适配移动端。因为UI页面设计PC端与移动端界面展示不同，其他页面都是相同的，所以就只写登录页面移动端适配即可。
PC端：Login.vue

mounted() {
  if (this._isMobile()) {
    this.$router.replace("/mobilelogin");
  }
},
methods: {
  _isMobile() {
    let flag = navigator.userAgent.match(
      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
    );
    return flag;
  },
},

移动端：MobileLogin.vue

mounted() {
  let docEl = document.documentElement;
  let clientWidth = document.documentElement.clientWidth;
  if (clientWidth >= 640) {
    docEl.style.fontSize = "16px";
  } else {
    docEl.style.fontSize = 70 * (clientWidth / 640) + "px";
  }
},


<style lang="less" scoped>
.logo {
    width: 130/35rem;
    height: 50/35rem;
    background: url("/assets/logo.png") 100% 100% no-repeat;
    background-size: contain;
    position: absolute;
    top: 3%;
    left: 50%;
    margin-left: -65/35rem;
  }
</style>