uni-app nvue在android上横屏全屏显示时，只占用了屏幕的左半边，右半边空白

uni-app nvue在android上横屏全屏显示时，只占用了屏幕的左半边，右半边空白

类别 值
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.3.9
手机系统 Android
手机系统版本号 Android 7.0
手机厂商 小米
手机机型 note
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤

nvue在android上横屏全屏显示时，只占用了屏幕的左半边，右半边空白,但当我电机hbuildx的“调试”或“重启”时屏幕显示就正常了。

预期结果

正常显示

实际结果

只占用了屏幕的左半边，右半边空白,但当我电机hbuildx的“调试”或“重启”时屏幕显示就正常了。

bug描述

nvue在android上横屏全屏显示时，只占用了屏幕的左半边，右半边空白,但当我电机hbuildx的“调试”或“重启”时屏幕显示就正常了。

app.vue中设置横屏的代码：

onLaunch: function() {  
                console.log('App Launch');  
                that = this  
                plus.navigator.setFullscreen(true); //隐藏状态栏  
                plus.screen.lockOrientation('landscape-primary');//锁定到屏幕横屏正方形

更多关于uni-app nvue在android上横屏全屏显示时，只占用了屏幕的左半边，右半边空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

问题解决：
（1）解决横屏：manifest.json中配置如下并打自定义基座，但状态栏无法影藏： app-plus->distribute下添加 // “fullscreen” : true,//不起作用
“orientation” : [ “landscape-primary” ],//需要打包后起作用 （2）影藏状态栏： 在app.vue中onLaunch中添加如下代码,并且两句都要写，只写setFullscreen也不行

    onLaunch: function() {  
        console.log('App Launch');  
        // #ifdef APP-PLUS        
        plus.navigator.setFullscreen(true); //隐藏状态栏(应用全屏:只能隐藏状态栏，标题栏和虚拟返回键都还可以显示)  
        plus.screen.lockOrientation('landscape-primary'); //锁定到屏幕横屏正方形    
        // #endif

（3）page.json中配置如下不起作用： “globalStyle”: {
“navigationBarTextStyle”: “white”,
“navigationBarTitleText”: “uni-app”,
“navigationBarBackgroundColor”: “#007AFF”,
“backgroundColor”: “#FFFFFF”,
“navigationStyle”: “custom”
// “pageOrientation”: “landscape”,//不起作用
// “rpxCalcMaxDeviceWidth”: 1920, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
// “rpxCalcBaseDeviceWidth”: 1920, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
// “rpxCalcIncludeWidth”: 1920, // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750
// “style”: {
// “app-plus”: {
// “titleNView”: false,
// “titleView”: false,
// “statusbar”: {
// “immersed”: false
// }
// }
// }

}<br>

更多关于uni-app nvue在android上横屏全屏显示时，只占用了屏幕的左半边，右半边空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在manifest.json中取消自动关闭splash【位置：manifest.json - APP启动界面配置 - 启动切面选项 - 取消勾选等待首页渲染完毕后再关闭splash图】。 然后在首页加个延迟手动关闭splash【plus.navigator.closeSplashscreen(); 】 试试会不会有效果

没有效果，延时关闭splash图后，首页还是只占用了屏幕的一半，感觉跟splash图没关系

回到顶部