优化移动端适配和路由处理逻辑

This commit is contained in:
wangqiao
2025-09-01 10:16:42 +08:00
parent 7a8f096513
commit 7ecff344de
3 changed files with 7 additions and 4 deletions

View File

@ -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`)

View File

@ -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/],

View File

@ -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;