vue项目PC兼容移动端

做完的pc项目要求兼容移动端,常规操作的话是新做一个webapp后再来回跳转,
当前pc项目没有太多的交互和复杂的页面,所以决定在一个项目里进行兼容适配
1.新建两个组件,pc端页面组件,m端页面组件
在这里插入图片描述

2.页面写个方法判断是pc端还是移动端(可在全局写)

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;
      }
  },
created(){
    if (this._isMobile()) {
        //手机端
        this.ismOrpc = 'Moperation'
        //设置rem
        window.onload = function(){
            getRem(750,100)
        };
        window.onresize = function(){
            getRem(750,100)
        };
        function getRem(pwidth,prem){
            var html = document.getElementsByTagName("html")[0];
            var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
            html.style.fontSize = oWidth/pwidth*prem + "px";
        }
        
      } else {
        //pc端
        this.ismOrpc = 'PCoperation'
      }
}

3.引入组件

import PCoperation from '@/components/pc/PCoperation'
import Moperation from '@/components/m/Moperation'

components: {
  footerInfo,
  PCoperation,
  Moperation
},

4.data设置初始值,根据值显示不同组件

js:
data(){
    return{
      ismOrpc:'PCoperation'//默认展示pc
    }
},
html:
<component :is="ismOrpc"/>
  • 4
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Nuxt.js 是一个基于 Vue.js 的通用应用框架,用于帮助开发者快速构建单页应用(SPA)、服务渲染应用(SSR)以及静态生成应用(SSG)。对于 PC 移动兼容性,Nuxt.js 提供了一些方便的工具和方法。 首先,在 Nuxt.js 中,默认会生成一个基于响应式布局的根容器,这使得页面能够根据设备的屏幕大小自动进行适配。这意味着无论用户在 PC 还是移动访问网站,页面都能够以最佳的布局展示,以确保良好的用户体验。 其次,Nuxt.js 内置了一些针对移动的功能和插件。例如,可以使用 @nuxtjs/pwa 插件来为应用添加 Progressive Web App 的特性,使得用户可以将网站添加到主屏幕、离线访问等。还可以使用 @nuxtjs/device 模块来判断设备类型,从而实现一些特定的逻辑处理,如为移动PC 分别加载不同的资源等。 此外,Nuxt.js 还提供了一些优化和性能相关的特性,这对于网站在 PC 移动兼容性非常重要。例如,Nuxt.js 支持代码分割和异步加载,可以将页面中的资源切分成多个小块,在用户访问时再进行动态加载,以提高页面加载速度和性能。这对于移动设备来说尤为重要,因为移动设备的网络环境和计算能力相对较弱。 综上所述,Nuxt.js 对于 PC 移动兼容性有着很好的支持。通过响应式布局、移动插件、设备判断、代码优化等特性,Nuxt.js 能够帮助开发者轻松构建出同时适配 PC 移动的应用。这使得用户无论使用何种设备访问网站,都能够得到良好的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值