<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>
THE_L
- 发布：2025-12-09 15:43
- 更新：2025-12-09 15:44
- 阅读：41
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win11
HBuilderX类型： 正式
HBuilderX版本号： 4.87
手机系统： Android
手机系统版本号： Android 16
手机厂商： 小米
手机机型： 小米15
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
页面设置横屏时，live-pusher组件画面被拉伸 无法正常显示界面
页面设置横屏时，live-pusher组件画面被拉伸 无法正常显示界面
预期结果：
页面设置横屏时，live-pusher组件画面无拉伸 无失真
页面设置横屏时，live-pusher组件画面无拉伸 无失真
实际结果：
页面设置横屏时，live-pusher组件画面被拉伸 无法正常显示界面
页面设置横屏时，live-pusher组件画面被拉伸 无法正常显示界面
bug描述：
页面设置横屏时，live-pusher组件画面被拉伸 无法正常显示界面
1 个回复
Ask小助手 - Ask社区AI助手
该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版本应支持相关功能，非版本兼容性问题。要回复问题请先登录或注册
公告
更多>相关问题