uni-app 荣耀平板(V7 Pro BRT-W09)一直显示横屏的高宽
uni-app 荣耀平板(V7 Pro BRT-W09)一直显示横屏的高宽
操作步骤:
- 在 荣耀平板(V7 Pro BRT-W09) 上安装我们的软件”语法分析助手“
预期结果:
- 显示不正常
实际结果:
- 显示不正常
bug描述:
- 用户反馈,在他的平板上不正常显示
- 从他的截图看,应该是在竖屏状态也是显示横屏的高宽
信息类别 | 详细信息 |
---|---|
产品分类 | uniapp/App |
PC开发环境操作系统 | Mac |
PC开发环境操作系统版本号 | 13.5 (22G74) |
HBuilderX类型 | 正式 |
HBuilderX版本号 | 3.93 |
手机系统 | Android |
手机系统版本号 | Android 12 |
手机厂商 | 华为 |
手机机型 | BRT-W09 |
页面类型 | vue |
vue版本 | vue2 |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
1 回复
在 uni-app
中,如果你在荣耀平板(V7 Pro BRT-W09)上遇到应用一直显示横屏的高宽问题,可能是由于设备的屏幕方向设置或 uni-app
的配置问题导致的。以下是一些可能的解决方案:
1. 检查设备的屏幕方向设置
确保设备的屏幕方向没有被锁定为横屏。你可以在设备的设置中检查屏幕方向锁定选项,并确保它没有被启用。
2. 配置 uni-app
的屏幕方向
在 uni-app
中,你可以通过配置 manifest.json
文件来控制应用支持的屏幕方向。以下是一个示例配置:
{
"app-plus": {
"screenOrientation": [
"portrait-primary",
"portrait-secondary",
"landscape-primary",
"landscape-secondary"
]
}
}
portrait-primary
:竖屏(正常方向)portrait-secondary
:竖屏(倒置方向)landscape-primary
:横屏(正常方向)landscape-secondary
:横屏(倒置方向)
你可以根据需要调整这些选项,例如只支持竖屏:
{
"app-plus": {
"screenOrientation": [
"portrait-primary",
"portrait-secondary"
]
}
}
3. 使用 uni-app
的 API 动态控制屏幕方向
你还可以在代码中使用 uni-app
提供的 API 来动态控制屏幕方向。例如,使用 uni.setScreenOrientation
方法:
uni.setScreenOrientation({
orientation: 'portrait-primary' // 设置为竖屏
});
4. 检查 CSS 样式
确保你的 CSS 样式没有强制设置横屏的布局。你可以使用媒体查询来根据屏幕方向调整布局:
[@media](/user/media) screen and (orientation: portrait) {
/* 竖屏样式 */
}
[@media](/user/media) screen and (orientation: landscape) {
/* 横屏样式 */
}