uni-app vue3 "maxWidth"显示不正常

uni-app vue3 "maxWidth"显示不正常

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

产品分类：uniapp/H5

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.2.10

浏览器平台：Chrome

浏览器版本：edge

示例代码：

{
"pages": [
{
"path": "pages/tabbar/index/index",
"style": {
"navigationBarTitleText": "主页",
"enablePullDownRefresh": false
}
},
{
"path" : "pages/huany/huany",
"style" :
{
"navigationBarTitleText": "智分享欢迎您",
"enablePullDownRefresh": false
}  
},  
{  
"path" : "pages/tabbar/gouw/gouw",  
"style" :                                                                                      
{  
"navigationBarTitleText": "购物",  
"enablePullDownRefresh": false  
}  

},  
{  
"path" : "pages/tabbar/wode/wode",  
"style" :                                                                                      
{  
"navigationBarTitleText": "我的",  
"enablePullDownRefresh": false  
}  

},  
{  
"path" : "pages/tabbar/zhid/zhid",  
"style" :                                                                                      
{  
"navigationBarTitleText": "智点",  
"enablePullDownRefresh": false  
}  

}
],  
"globalStyle": {  
"navigationBarTextStyle": "black",  
"navigationBarTitleText": "智分享",  
"navigationBarBackgroundColor": "#dbffe1",  
"backgroundColor": "#F8F8F8",  
// "allowsBounceVertical":"NO",//是否允许向下拉拽。支持 YES / NO  
// #ifdef H5  
"navigationStyle":"custom", //设置是否要导航栏   
// #endif  
"maxWidth":375  
},  
"tabBar": {  
   "color": "#7A7E83",  
   "selectedColor": "#ff0000",  
   "borderStyle": "white",  
   // "position":"top",  
   "backgroundColor": "#dbffe1",  
   // #ifdef H5 || APP-PLUS  
   "fontSize":"14px",  
   // #endif  
    "list": [  
        {  
            "pagePath": "pages/tabbar/index/index",  
            "iconPath": "static/fls.png",  
            "selectedIconPath": "static/fl.png",  
            "text": "主页"  
        },   
        {  
            "pagePath": "pages/tabbar/zhid/zhid",  
            "iconPath": "static/tss.png",  
            "selectedIconPath": "static/ts.png",  
            "text": "智点"  
        },  
        {  
            "pagePath": "pages/tabbar/gouw/gouw",  
            "iconPath": "static/gws.png",  
            "selectedIconPath": "static/gw.png",  
            "text": "购物车"  
        },  
        {  
            "pagePath": "pages/tabbar/wode/wode",  
            "iconPath": "static/xxs.png",  
            "selectedIconPath": "static/xx.png",  
            "text": "信息"  
        }  
    ]  
},  
"condition" : { //模式配置，仅开发期间生效  
    "current": 0, //当前激活的模式(list 的索引项)  
    "list": [  
        {  
            "name": "", //模式名称  
            "path": "", //启动页面，必选  
            "query": "" //启动参数，在页面的onLoad函数里面得到  
        }  
    ]  
}

更多关于uni-app vue3 "maxWidth"显示不正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

问题复现，后续优化，已加分，感谢您的反馈！

更多关于uni-app vue3 "maxWidth"显示不正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，maxWidth 属性在 H5 平台下确实存在一些限制。根据你的配置，你设置了 "maxWidth": 375，这通常用于限制页面的最大宽度，在移动端浏览器中模拟小屏幕效果。

主要问题分析：

  1. H5 平台兼容性：maxWidth 在 H5 平台的支持可能不够完善，特别是在使用 navigationStyle: "custom" 自定义导航栏时，可能会出现布局计算问题。

  2. CSS 单位问题：maxWidth: 375 没有指定单位，在 H5 中应该使用 "maxWidth": "375px" 明确指定像素单位。

  3. 自定义导航栏影响：当你设置 navigationStyle: "custom" 时，页面布局需要手动处理状态栏和导航栏的高度，这可能与 maxWidth 的布局计算产生冲突。

建议的解决方案：

  1. 明确单位：
"globalStyle": {
  "maxWidth": "375px"
}
  1. 使用 CSS 媒体查询替代（更可靠）： 在 App.vue 或页面的 style 中添加：
[@media](/user/media) (min-width: 376px) {
  .page-container {
    max-width: 375px;
    margin: 0 auto;
  }
}
回到顶部