页面设置横屏时 uni-app live-pusher组件画面被拉伸 无法正常显示界面

页面设置横屏时 uni-app live-pusher组件画面被拉伸 无法正常显示界面

项目属性 信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 4.87
手机系统 Android
手机系统版本号 Android 16
手机厂商 小米
手机机型 小米15
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>  
    <live-pusher style="width: 100%;height: 100%;" orientation="horizontal" aspect="9:20" v-if="showLive">  
    </live-pusher>  
</template>  

<script>  
    export default {  
        name: "LivePusherPage",  
        data() {  
            return {  
                showLive: false  
            };  
        },  
        onLoad() {  
            // 页面加载：强制锁定横屏  
            plus.screen.lockOrientation("landscape-primary");  

            setTimeout(() => {  
                this.showLive = true;  
            }, 1000);  
        }  
    };  
</script>  

<style scoped>  

</style>

操作步骤：

页面设置横屏时，live-pusher组件画面被拉伸 无法正常显示界面

预期结果：

页面设置横屏时，live-pusher组件画面无拉伸 无失真

实际结果：

页面设置横屏时，live-pusher组件画面被拉伸 无法正常显示界面

bug描述：

页面设置横屏时，live-pusher组件画面被拉伸 无法正常显示界面


更多关于页面设置横屏时 uni-app live-pusher组件画面被拉伸 无法正常显示界面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

该bug反馈内容基本完整，标题清晰描述了问题核心，代码示例完整可直接运行，包含关键配置orientation=“horizontal” aspect=“9:20"和横屏锁定逻辑。分类信息详尽（开发环境、版本号、设备信息等），但复现步骤过于简略，仅重复问题现象，缺乏具体操作流程指引，可能导致官方复现困难。
经知识库分析，该bug很可能成立。知识库明确指出live-pusher的aspect属性用于控制视频宽高比（默认3:2），而用户设置9:20（接近竖屏比例）在横屏场景下易导致拉伸。同时知识库强调：“在pc屏幕或pad横屏状态下，屏幕宽度远大于750px时，rpx适配效果会严重脱离预期”，且"App平台推荐使用nvue做直播”（App平台直播方案）。用户当前使用Vue2页面+横屏强制锁定，在Android 16设备上可能因rpx计算逻辑导致画面异常拉伸。
建议用户：1) 尝试将aspect改为"16:9"等横屏标准比例；2) 在pages.json中配置rpxCalcMaxDeviceWidth和rpxCalcBaseDeviceWidth解决宽屏适配问题（rpx适配文档）；3) 考虑迁移至nvue页面获取更好的横屏直播体验（nvue直播优势说明）。当前HBuilderX 4.87版本应支持相关功能，非版本兼容性问题。 内容为 AI 生成，仅供参考

更多关于页面设置横屏时 uni-app live-pusher组件画面被拉伸 无法正常显示界面的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的横屏适配问题。问题出在 aspect 属性设置不当。

aspect 属性控制的是推流画面的宽高比，但这里的 “9:20” 是竖屏比例（9:20 ≈ 9:20）。当页面强制横屏后，摄像头采集的画面仍然是横屏比例（通常是 16:9 或 4:3），而组件却按照竖屏比例进行渲染，导致画面被严重拉伸变形。

解决方案：

将 aspect 属性改为横屏比例：

<live-pusher 
    style="width: 100%;height: 100%;" 
    orientation="horizontal" 
    aspect="16:9" 
    v-if="showLive">
</live-pusher>

关键点说明：

  1. orientation="horizontal"：仅表示推流输出为横屏模式，不控制预览画面的渲染比例。
  2. aspect 属性：必须与当前屏幕方向的实际宽高比匹配。横屏状态下应使用 "16:9" 或 "4:3"。
  3. 常见横屏比例：
    • "16:9"（宽屏，常用）
    • "4:3"（标准比例）
    • "3:2"（部分设备）

补充建议：

如果改为 "16:9" 后仍有轻微拉伸，可能是设备摄像头原生比例并非 16:9。可以尝试动态计算屏幕比例：

onLoad() {
    plus.screen.lockOrientation("landscape-primary");
    
    // 获取屏幕实际宽高比
    const { windowWidth, windowHeight } = uni.getSystemInfoSync();
    const ratio = windowWidth / windowHeight; // 横屏下 windowWidth > windowHeight
    
    // 根据实际比例选择最接近的预设值
    this.aspect = Math.abs(ratio - 16/9) < Math.abs(ratio - 4/3) ? "16:9" : "4:3";
    
    setTimeout(() => {
        this.showLive = true;
    }, 1000);
}
回到顶部