优化移动端适配和路由处理逻辑
This commit is contained in:
@ -5,8 +5,11 @@ export default defineNuxtRouteMiddleware((to, from) => {
|
|||||||
// 在客户端处理路由
|
// 在客户端处理路由
|
||||||
// 是否是移动端设备
|
// 是否是移动端设备
|
||||||
const isMobile = /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(navigator.userAgent)
|
const isMobile = /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(navigator.userAgent)
|
||||||
// 是否是手机端路由
|
// 是否是手机端路由开头
|
||||||
const isRouterMobile = /^\/m\//.test(to.fullPath)
|
const isRouterMobile = to.path.startsWith('/m')
|
||||||
|
|
||||||
|
console.log(isMobile, isRouterMobile);
|
||||||
|
|
||||||
// 移动端并且 不是/m开头路由
|
// 移动端并且 不是/m开头路由
|
||||||
if (isMobile && !isRouterMobile) {
|
if (isMobile && !isRouterMobile) {
|
||||||
return navigateTo(`/m`)
|
return navigateTo(`/m`)
|
||||||
|
|||||||
@ -41,7 +41,7 @@ export default defineNuxtConfig({
|
|||||||
minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
|
minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
|
||||||
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
|
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
|
||||||
replace: true, // 是否转换后直接更换属性值
|
replace: true, // 是否转换后直接更换属性值
|
||||||
exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配,最好不要排除node_modules 文件,排除后在项目中会发现字体不能跟随页面放大
|
exclude: [/node_modules/, /^(?!.*\/pages\/m\/).*$/], // 排除node_modules和非pages/m目录下的文件
|
||||||
landscape: false, // 是否处理横屏情况
|
landscape: false, // 是否处理横屏情况
|
||||||
// 只转换pages下的m文件
|
// 只转换pages下的m文件
|
||||||
include: [/pages\/m/],
|
include: [/pages\/m/],
|
||||||
|
|||||||
@ -169,7 +169,7 @@
|
|||||||
.menu-item {
|
.menu-item {
|
||||||
/* position: relative; */
|
/* position: relative; */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 11px 24px;
|
padding: 10px 24px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
/* transition: all 0.3s ease; */
|
/* transition: all 0.3s ease; */
|
||||||
color: #333;
|
color: #333;
|
||||||
|
|||||||
Reference in New Issue
Block a user