2***@qq.com
2***@qq.com
  • 发布:2019-11-28 13:51
  • 更新:2019-12-24 10:31
  • 阅读:2080

【报Bug】android vue页面 横屏750rpx 不能填充满屏

分类:uni-app

详细问题描述

再提一次
app.vue 锁定横屏
android vue页面 横屏750rpx 不能填充满屏

[内容]

重现步骤

官方uni-hello 首页界面不要用nvue 直接用vue
[步骤]

[结果]
不会满屏

第二次

App运行环境说明

最新版HX编译
[Android版本号]
android 9

2019-11-28 13:51 负责人:无 分享
已邀请:
DCloud_heavensoft

DCloud_heavensoft

你这个问题不是rpx不满屏,而是app先竖屏后横屏造成的。
在app仍处于竖屏时,rpx就是按竖屏宽度计算的。然后你再横屏时,rpx不会重新计算。
想要动态适应横竖屏,使用媒体查询或百分比单位。

以及,在manifest里配app的横屏,而不是在app.vue里,后者反应已经慢了。

  • 2***@qq.com (作者)

    首先感谢您的回复 其次站在使用者的角度来看 不管我在哪边设置是否应该都需要转化过来 。如果不行 也只能按照您的来了

    2019-12-01 00:18

  • DCloud_heavensoft

    回复 2***@qq.com: rpx不是这个逻辑,各家小程序都是一样的

    2019-12-01 00:26

  • 2***@qq.com (作者)

    我已经按照您的方式在manifest 中配置横屏 "orientation" : [ "landscape-primary", "landscape-secondary" ], 2个问题 1、ios 端根本无效不会横屏 2.android端 还是一样 不会满屏

    2019-12-01 15:52

  • 2***@qq.com (作者)

    回复 DCloud_heavensoft: 大哥能帮忙再看看吗!怎么设置都没效果

    2019-12-02 08:54

  • 2***@qq.com (作者)

    回复 DCloud_heavensoft: !!!

    2019-12-02 18:43

  • DCloud_heavensoft

    回复 2***@qq.com: manifest配对了吗?贴出来看看

    2019-12-02 23:34

  • 2***@qq.com (作者)

    回复 DCloud_heavensoft: / 应用发布信息 /

    "distribute" : {

    "orientation" : [ "landscape-primary", "landscape-secondary" ],

    "fullscreen" : true,... 就这边配置的 我弄错地方了吗?

    2019-12-03 00:26

  • DCloud_heavensoft

    回复 2***@qq.com: 你那个是打包生效的。这个screenOrientation是真机运行也生效的

    2019-12-03 02:02

  • 2***@qq.com (作者)

    回复 DCloud_heavensoft: 我觉得你们还是自己好好测试测试 很明显的 不管在哪里设置横屏 动态单位的计算都是以竖屏来计算的 不管是真机还是自定义基座 还是云打包 都试过 都是没用的 。如果一定要重现 我附件上传一个项目 你们可以看看

    2019-12-20 15:25

DCloud_uniAD_HDX

DCloud_uniAD_HDX

app平台

1、manifest.json app-plus > distribute > orientation 配置后需要打包后生效
2、在 App.vue onLanuch 中需要手动锁定屏幕方向(开启重力感应后会旋转),plus.screen.lockOrientation('landscape-primary');

HBuilderX 2.4.5 (alpha版 尚未发布) 在 app-plus > screenOrientation 配置后无需打包生效

小程序平台
pages.json globalStyle > {"pageOrientation": "portrait"}//全局屏幕旋转设置(仅微信/QQ小程序),支持 auto / portrait / landscape, 同时支持单页面配置 参考文档 https://uniapp.dcloud.io/collocation/pages?id=globalstyle

  • 2***@qq.com (作者)

    你好 打包的我已经试过 安装后750rpx还是按照竖屏计算的 我现在已经搞蒙了 按照这个设置 我就是行不通 。。。。

    2019-12-03 16:10

  • DCloud_uniAD_HDX

    回复 2***@qq.com: 修改编译器 直接用基座调试看看

    2019-12-03 16:19

DCloud_uniAD_HDX

DCloud_uniAD_HDX

当前版本解决方案,需要修改编译器代码

  1. 找到HBuilderX 目录
    HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\webpack-uni-pages-loader\lib\platforms\app-plus\index.js

  2. 在 126 行 加入下面的代码

    
    // 屏幕启动方向  
    if (manifestJson.plus.screenOrientation) {  
    manifestJson.screenOrientation = manifestJson.plus.screenOrientation  
    delete manifestJson.plus.screenOrientation  
    }  


  • 2***@qq.com (作者)

    .main-view {

    display: flex;

    // flex: 1;

    width: 750rpx;

    background: #00CE47;//绿色 这是css 然后我上传一张图上去 看看结果 还是一样 750 就是 一个竖屏宽

    2019-12-03 16:33

  • 2***@qq.com (作者)

    你看看结果 绿色就是750

    2019-12-03 16:35

  • 2***@qq.com (作者)

    有解吗 大哥们 我的应用只是要锁死横屏不需要动态横竖屏的 只要横屏的750rpx 宽度能铺满画面就行了

    2019-12-03 23:04

  • DCloud_uniAD_HDX

    回复 2***@qq.com: 是否按照上面的方式修改编译器代码,在不修改编译器时需要云打包后才生效

    2019-12-09 17:47

  • 2***@qq.com (作者)

    回复 DCloud_uniAD_HDX: 修改过了 没用 都是照你提示的做的 还是一样

    2019-12-09 23:58

  • 2***@qq.com (作者)

    回复 DCloud_uniAD_HDX: 就不能好好的查查吗。 项目建起来横屏 百分百重现。干嘛不修正呢

    2019-12-19 17:50

  • DCloud_uniAD_HDX

    回复 2***@qq.com: 用HBuilderX 2.4.7 验证没有问题

    2019-12-24 10:32

DCloud_uniAD_HDX

DCloud_uniAD_HDX

HBuilderX 2.4.7 +
新增 pages.json 配置屏幕方向。横屏应用请在这里配置,app.vue里生效较晚 详情

  • 2***@qq.com (作者)

    大佬 我用的是2.4.6 测试发现没用 我测试的代码传上去了 很简单的就一个页面

    2019-12-29 23:42

该问题目前已经被锁定, 无法添加新回复