vue网页 PC端和移动端兼容方案

您所在的位置:网站首页 vue手机端源码 vue网页 PC端和移动端兼容方案

vue网页 PC端和移动端兼容方案

2023-10-18 19:26| 来源: 网络整理| 查看: 265

一,通过媒体查询实现响应式(@media) 优点:适用于小型网页,用户交互较少的项目,代码用量较少; 缺点:在页面内容过多,用户交互过多的时候,如果通过 @media 来一个个改的话,那代码量可就很多了,而且也不方便维护。因此需要另一种方式来解决这个问题。

二,通过判断打开设备的类型,区分需要显示的方式和界面

//App.vue mounted() { if (this._isMobile()) { alert("手机端"); // this.$router.replace('/m_index'); } else { alert("pc端"); // this.$router.replace('/pc_index'); } }, methods: { //App.vue _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; } }

转载于: https://www.cnblogs.com/liangtao999/p/12047734.html



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3