uni-app 新版本打包后PC端时移动端的UI布局仍然存在问题

uni-app 新版本打包后PC端时移动端的UI布局仍然存在问题

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

操作步骤：

"topWindow": {  
    "path": "responsive/top-window.vue", // 指定 topWindow 页面文件  
    "style": {  
        "height": "240px"  
    }  
}

预期结果：

在超过宽度768时 隐藏移动端的导航

实际结果：

无法隐藏

bug描述：

image


更多关于uni-app 新版本打包后PC端时移动端的UI布局仍然存在问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 新版本打包后PC端时移动端的UI布局仍然存在问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据您描述的问题，在PC端仍显示移动端UI布局的情况，建议检查以下几点：

  1. 确保在pages.json中正确配置了responsive配置项，包括topWindow和leftWindow的路径设置。

  2. 检查您的响应式断点判断逻辑。推荐使用uni.getSystemInfo()获取屏幕宽度，然后通过条件渲染(v-if)来控制导航显示：

const systemInfo = uni.getSystemInfoSync()
const isPC = systemInfo.windowWidth > 768
  1. 在top-window.vue组件中，添加媒体查询样式：
[@media](/user/media) screen and (max-width: 768px) {
    .mobile-nav {
        display: none;
    }
}
回到顶部